@designbasekorea/ui-wc 0.8.8 → 0.8.11

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 변경 이력
 
+## 0.8.11 - 2026-09-16
+
+### 개선
+
+- `db-time-picker` 드롭다운을 body 포털 기반으로 개선해 좁은 컬럼과 `overflow: hidden` 컨테이너에서도 잘리지 않도록 수정
+- `dropdown-position`에 `auto`, `top-start`, `top-end` 추가 및 뷰포트 경계 자동 배치 지원
+- TimePicker S/M/L 패널 폭과 휠 항목 크기 조정, 중앙 선택선 정렬 보정
+- `db-toggle` Neutral 선택 상태를 다크 그레이 트랙으로 변경
+
+## 0.8.10 - 2026-09-15
+
+### 추가
+
+- `db-ai-glow` (React `AiGlow`) — AI가 생각·작업·청취 중일 때 화면 테두리 안쪽으로 여러 색 그라데이션이 번지는 글로우 (iOS Siri·브라우저 에이전트 스타일)
+  - 기본은 뷰포트 전체 오버레이, `contained` 로 카드·섹션 안에만 표시
+  - `state`: `thinking`(기본) · `working` · `listening`, `variant`: `aurora` · `brand`, `size`: `s` · `m` · `l`
+  - `listening` 은 `audioStream`(마이크) 또는 `voice-level` 에 맞춰 두께·밝기가 출렁임
+  - `label` 로 켜질 때 스크린 리더 안내, `prefers-reduced-motion` 시 정지
+
+## 0.8.9 - 2026-09-06
+
+### 수정
+
+- 빈 Section 헤더가 WordPress 관리자 스타일에 의해 패딩·보더만 남기지 않도록 숨김 처리 강화
+- 공통 `[hidden]` 스타일과 마케팅 섹션 헤더 자동 숨김을 보강해 빈 콘텐츠가 레이아웃을 차지하지 않게 함
+- 아이콘 SVG 생성 시 동적 HTML 속성 보간을 제거하고, 링크/CTA URL의 위험 스킴을 차단
+- `db-button`의 `href`·`target` 이동을 지원해 섹션 CTA가 실제 링크로 동작하도록 함
+
 ## 0.8.8 - 2026-09-02
 
 ### 추가

package/README.md

@@ -70,6 +70,10 @@ import '@designbasekorea/ui-wc';
 <db-tabs items='[{"id":"a","label":"홈"},{"id":"b","label":"탐색"}]'></db-tabs>
 ```
 
+링크 속성은 <code>http:</code>, <code>https:</code>, <code>mailto:</code>, <code>tel:</code> 등
+허용된 스킴만 동작합니다. AI 채팅·마크다운의 <code>html</code> 본문은 허용 태그/속성으로
+정제되며, 애플리케이션이 직접 Node를 마운트하는 API는 호출자가 신뢰된 콘텐츠만 전달해야 합니다.
+
 ---
 
 ## 트리셰이킹 / 개별 import
@@ -266,7 +270,7 @@ document.querySelector('db-input').addEventListener('input', handler);
 
 | 태그 | 설명 |
 |------|------|
-| `db-button` | 버튼 (variant, size, loading, icon 지원) |
+| `db-button` | 버튼/링크 (variant, size, loading, icon, href 지원) |
 | `db-input` | 텍스트 입력 (password, search, number scrub 지원) |
 | `db-textarea` | 여러 줄 텍스트 입력 |
 | `db-select` | 드롭다운 선택 (단일/다중, 검색 지원) |

package/dist/esm/components/animation-background/controls.js

@@ -1 +1 @@
-import{GRAPHITE_PRESET_IDS as e}from"./graphite-presets.js";const t=3e3,r={speed:{attr:"speed",label:"Speed (×)",kind:"range",min:500,max:12e3,step:100,default:t,display:{min:.2,max:4,step:.1,fixed:1,fromAttr:e=>{const r=Math.min(12e3,Math.max(500,e));return Math.round(r/t*10)/10},toAttr:e=>{const r=Math.min(4,Math.max(.2,e));return Math.round(r*t)}}},blur:{attr:"blur",label:"Blur",kind:"range",min:0,max:200,step:2,default:80},opacity:{attr:"opacity",label:"Opacity",kind:"range",min:0,max:1,step:.05,default:1,fixed:2},noise:{attr:"noise",label:"Noise",kind:"range",min:0,max:.4,step:.01,default:.05,fixed:2},zoom:{attr:"zoom",label:"Zoom",kind:"range",min:.5,max:3,step:.1,default:1,fixed:1},particleCount:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:50},particleCountParticles:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:15},particleSize:{attr:"particle-size",label:"Particle Size",kind:"range",min:1,max:10,step:.5,default:2,fixed:1},starCount:{attr:"star-count",label:"Star Count",kind:"range",min:20,max:500,step:10,default:100},starSize:{attr:"star-size",label:"Star Size",kind:"range",min:.5,max:6,step:.5,default:1.5,fixed:1},wind:{attr:"wind",label:"Wind",kind:"range",min:0,max:3,step:.1,default:.5,fixed:1},direction:{attr:"direction",label:"Direction",kind:"select",options:["left","right","up","down","diagonal","radial"],default:"left"},intensity:{attr:"intensity",label:"Intensity",kind:"select",options:["subtle","medium","vivid"],default:"subtle"},theme:{attr:"theme",label:"Theme",kind:"select",options:["dark","light"],default:"dark"},preset:{attr:"preset",label:"Preset",kind:"select",options:["(none)","neon_dream","sunset_bliss","deep_ocean","forest_mist","northern_lights","monochrome_fog","cotton_candy","cyber_glitch","golden_hour"],default:"(none)"},showVignette:{attr:"show-vignette",label:"Vignette",kind:"toggle",default:!0},shaderSpeed:{attr:"shader-speed",label:"Speed",kind:"range",min:0,max:3,step:.01,default:.4,fixed:2},shaderIntensity:{attr:"shader-intensity",label:"Intensity",kind:"range",min:.1,max:3,step:.01,default:1.2,fixed:2},grain:{attr:"noise",label:"Grain",kind:"range",min:0,max:.5,step:.01,default:.1,fixed:2},scale:{attr:"zoom",label:"Scale",kind:"range",min:.5,max:5,step:.1,default:1,fixed:1},warp:{attr:"warp",label:"Warp",kind:"range",min:0,max:2,step:.05,default:1.4,fixed:2},graphiteTheme:{attr:"preset",label:"Theme",kind:"select",options:[...e],default:"graphite"}};function colors(e){return{attr:"colors",label:"Colors",kind:"colors",default:e}}const a={particles:[r.particleCountParticles,r.particleSize,r.speed,r.opacity,colors(["#60a5fa","#a78bfa","#f472b6"])],stars:[r.starCount,r.starSize,r.speed,r.opacity,colors(["#ffffff","#e0e7ff","#c7d2fe"])],snow:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffffff","#f0f9ff","#e0f2fe"])],flowers:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffb7c5","#ff91a4","#f8c8dc","#ffc0cb"])],confetti:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#f44336","#e91e63","#9c27b0","#2196f3","#4caf50","#ffeb3b"])],aurora:[r.intensity,r.blur,r.speed,r.theme,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6"])],plasma:[r.speed,r.blur,r.noise,r.showVignette,r.preset,colors(["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"])],"mesh-flow":[r.speed,r.blur,r.noise,r.zoom,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6","#22d3ee"])],fluid:[r.speed,r.blur,r.noise,r.zoom,colors(["#001133","#0044FF","#00DDFF","#00FFAA","#000066"])],radiant:[r.speed,r.blur,r.noise,r.zoom,colors(["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"])],ethereal:[r.speed,r.blur,r.noise,r.zoom,colors(["#7000FF","#FF00AA","#00FFFF","#FFFFFF","#3300FF"])],prism:[r.speed,r.blur,r.noise,r.showVignette,colors([])],graphite:[r.shaderSpeed,r.shaderIntensity,r.grain,r.scale,r.warp,r.graphiteTheme,colors(["#000000","#333333","#b3b3b3"])]};function getControlsForType(e){return a[e]??a.graphite}function getControlSliderBounds(e){return e.display?{min:e.display.min,max:e.display.max,step:e.display.step,fixed:e.display.fixed}:{min:e.min??0,max:e.max??100,step:e.step??1,fixed:e.fixed}}function controlAttrToSlider(e,t){return e.display?e.display.fromAttr(t):t}function controlSliderToAttr(e,t){return e.display?e.display.toAttr(t):t}function readControlValue(e,t){const r=e.getAttribute(t.attr);if("colors"===t.kind){if(!r)return[...t.default];try{const e=JSON.parse(r);return Array.isArray(e)&&e.length?[...e]:[...t.default]}catch{const e=r.split(",").map(e=>e.trim()).filter(Boolean);return e.length?e:[...t.default]}}if("toggle"===t.kind)return null===r?t.default:"false"!==r;if("select"===t.kind)return r||t.default;if(null===r||""===r)return t.default;const a=Number(r);return Number.isFinite(a)?a:t.default}function writeControlAttribute(e,t,r){"colors"!==t.kind?"toggle"!==t.kind?"select"!==t.kind?e.setAttribute(t.attr,String(r)):"(none)"===r?e.removeAttribute(t.attr):e.setAttribute(t.attr,String(r)):e.setAttribute(t.attr,r?"true":"false"):e.setAttribute(t.attr,JSON.stringify(r))}function resetControlsToDefaults(e,t){t.forEach(t=>{const r=t.default;"select"!==t.kind||r!==t.default?writeControlAttribute(e,t,Array.isArray(r)?[...r]:r):"(none)"===r?e.removeAttribute(t.attr):writeControlAttribute(e,t,r)})}export{controlAttrToSlider,controlSliderToAttr,getControlSliderBounds,getControlsForType,readControlValue,resetControlsToDefaults,writeControlAttribute};
+import{GRAPHITE_PRESET_IDS as e}from"./graphite-presets.js";const t=3e3,r={speed:{attr:"speed",label:"Speed (×)",kind:"range",min:500,max:12e3,step:100,default:t,display:{min:.2,max:4,step:.1,fixed:1,fromAttr:e=>{const r=Math.min(12e3,Math.max(500,e));return Math.round(r/t*10)/10},toAttr:e=>{const r=Math.min(4,Math.max(.2,e));return Math.round(r*t)}}},blur:{attr:"blur",label:"Blur",kind:"range",min:0,max:200,step:2,default:80},opacity:{attr:"opacity",label:"Opacity",kind:"range",min:0,max:1,step:.05,default:1,fixed:2},noise:{attr:"noise",label:"Noise",kind:"range",min:0,max:.4,step:.01,default:.05,fixed:2},zoom:{attr:"zoom",label:"Zoom",kind:"range",min:.5,max:3,step:.1,default:1,fixed:1},particleCount:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:50},particleCountParticles:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:15},particleSize:{attr:"particle-size",label:"Particle Size",kind:"range",min:1,max:10,step:.5,default:2,fixed:1},starCount:{attr:"star-count",label:"Star Count",kind:"range",min:20,max:500,step:10,default:100},starSize:{attr:"star-size",label:"Star Size",kind:"range",min:.5,max:6,step:.5,default:1.5,fixed:1},wind:{attr:"wind",label:"Wind",kind:"range",min:0,max:3,step:.1,default:.5,fixed:1},intensity:{attr:"intensity",label:"Intensity",kind:"select",options:["subtle","medium","vivid"],default:"subtle"},theme:{attr:"theme",label:"Theme",kind:"select",options:["dark","light"],default:"dark"},preset:{attr:"preset",label:"Preset",kind:"select",options:["(none)","neon_dream","sunset_bliss","deep_ocean","forest_mist","northern_lights","monochrome_fog","cotton_candy","cyber_glitch","golden_hour"],default:"(none)"},showVignette:{attr:"show-vignette",label:"Vignette",kind:"toggle",default:!0},shaderSpeed:{attr:"shader-speed",label:"Speed",kind:"range",min:0,max:3,step:.01,default:.4,fixed:2},shaderIntensity:{attr:"shader-intensity",label:"Intensity",kind:"range",min:.1,max:3,step:.01,default:1.2,fixed:2},grain:{attr:"noise",label:"Grain",kind:"range",min:0,max:.5,step:.01,default:.1,fixed:2},scale:{attr:"zoom",label:"Scale",kind:"range",min:.5,max:5,step:.1,default:1,fixed:1},warp:{attr:"warp",label:"Warp",kind:"range",min:0,max:2,step:.05,default:1.4,fixed:2},graphiteTheme:{attr:"preset",label:"Theme",kind:"select",options:[...e],default:"graphite"}};function colors(e){return{attr:"colors",label:"Colors",kind:"colors",default:e}}const a={particles:[r.particleCountParticles,r.particleSize,r.speed,r.opacity,colors(["#60a5fa","#a78bfa","#f472b6"])],stars:[r.starCount,r.starSize,r.speed,r.opacity,colors(["#ffffff","#e0e7ff","#c7d2fe"])],snow:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffffff","#f0f9ff","#e0f2fe"])],flowers:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffb7c5","#ff91a4","#f8c8dc","#ffc0cb"])],confetti:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#f44336","#e91e63","#9c27b0","#2196f3","#4caf50","#ffeb3b"])],aurora:[r.intensity,r.blur,r.speed,r.theme,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6"])],plasma:[r.speed,r.blur,r.noise,r.showVignette,r.preset,colors(["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"])],"mesh-flow":[r.speed,r.blur,r.noise,r.zoom,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6","#22d3ee"])],fluid:[r.speed,r.blur,r.noise,r.zoom,colors(["#001133","#0044FF","#00DDFF","#00FFAA","#000066"])],radiant:[r.speed,r.blur,r.noise,r.zoom,colors(["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"])],ethereal:[r.speed,r.blur,r.noise,r.zoom,colors(["#7000FF","#FF00AA","#00FFFF","#FFFFFF","#3300FF"])],prism:[r.speed,r.blur,r.noise,r.showVignette,colors([])],graphite:[r.shaderSpeed,r.shaderIntensity,r.grain,r.scale,r.warp,r.graphiteTheme,colors(["#000000","#333333","#b3b3b3"])]};function getControlsForType(e){return a[e]??a.graphite}function getControlSliderBounds(e){return e.display?{min:e.display.min,max:e.display.max,step:e.display.step,fixed:e.display.fixed}:{min:e.min??0,max:e.max??100,step:e.step??1,fixed:e.fixed}}function controlAttrToSlider(e,t){return e.display?e.display.fromAttr(t):t}function controlSliderToAttr(e,t){return e.display?e.display.toAttr(t):t}function readControlValue(e,t){const r=e.getAttribute(t.attr);if("colors"===t.kind){if(!r)return[...t.default];try{const e=JSON.parse(r);return Array.isArray(e)&&e.length?[...e]:[...t.default]}catch{const e=r.split(",").map(e=>e.trim()).filter(Boolean);return e.length?e:[...t.default]}}if("toggle"===t.kind)return null===r?t.default:"false"!==r;if("select"===t.kind)return r||t.default;if(null===r||""===r)return t.default;const a=Number(r);return Number.isFinite(a)?a:t.default}function writeControlAttribute(e,t,r){"colors"!==t.kind?"toggle"!==t.kind?"select"!==t.kind?e.setAttribute(t.attr,String(r)):"(none)"===r?e.removeAttribute(t.attr):e.setAttribute(t.attr,String(r)):e.setAttribute(t.attr,r?"true":"false"):e.setAttribute(t.attr,JSON.stringify(r))}function resetControlsToDefaults(e,t){t.forEach(t=>{const r=t.default;"select"!==t.kind||r!==t.default?writeControlAttribute(e,t,Array.isArray(r)?[...r]:r):"(none)"===r?e.removeAttribute(t.attr):writeControlAttribute(e,t,r)})}export{controlAttrToSlider,controlSliderToAttr,getControlSliderBounds,getControlsForType,readControlValue,resetControlsToDefaults,writeControlAttribute};

package/dist/esm/components/animation-background/layers.js

@@ -1 +1 @@
-import{LUMINA_NOISE_SVG as e,isLuminaType as t,FLUID_DEFAULT_COLORS as a,padColors as r,toAnimationDurationSec as n,LUMINA_ANIMATION_DURATION_SEC as s,toLuminaSpeed as i}from"./lumina-utils.js";import{getLuminaPresetColors as o}from"./lumina-presets.js";import{getGraphitePreset as l,GRAPHITE_DEFAULT_COLORS as d,isGraphitePresetId as m}from"./graphite-presets.js";import{getFallingParticleDefaults as p}from"./particle-defaults.js";import{CanvasAnimationController as u}from"./canvas-controller.js";import{ShaderAnimationController as g}from"./shader-controller.js";import{GraphiteShaderController as b}from"./graphite-controller.js";const f="designbase-wc-animation-background",h="graphite",y=new Set(["particles","stars","snow","flowers","confetti","aurora","plasma","mesh-flow","fluid","radiant","ethereal","graphite","prism"]);function parseColors(e,t){if(!e)return t;try{const a=JSON.parse(e);return Array.isArray(a)&&a.length?a:t}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}}function parseAnimationBackgroundConfig(e){const t=function normalizeAnimationType(e){return e&&"gradient"!==e&&y.has(e)?e:h}(e.getAttribute("type")),a="light"===e.getAttribute("theme")?"light":"dark",r=e.getAttribute("intensity")||"subtle",n=e.getAttribute("preset")||void 0,s=e.getAttribute("zoom"),i="graphite"===t;let o=Number(s||1);if(i&&null===s){const e=m(n)?n:"graphite";o=l(e).scale}return{type:t,theme:a,intensity:r,blur:Number(e.getAttribute("blur")||80),speed:Number(e.getAttribute("speed")||3e3),direction:e.getAttribute("direction")||"left",colors:parseColors(e.getAttribute("colors"),"prism"===t?[]:i?[...d]:["#667eea","#764ba2","#f093fb"]),opacity:Number(e.getAttribute("opacity")||1),particleCount:Number(e.getAttribute("particle-count")||("particles"===t?15:50)),particleSize:Number(e.getAttribute("particle-size")||2),starCount:Number(e.getAttribute("star-count")||100),starSize:Number(e.getAttribute("star-size")||1.5),clickable:e.hasAttribute("clickable")&&"false"!==e.getAttribute("clickable"),wind:Number(e.getAttribute("wind")||.5),noise:Number(e.getAttribute("noise")??(i?.1:.05)),showVignette:!e.hasAttribute("show-vignette")||"false"!==e.getAttribute("show-vignette"),preset:n||(i?"graphite":void 0),zoom:o,shaderSpeed:Number(e.getAttribute("shader-speed")||.4),shaderIntensity:Number(e.getAttribute("shader-intensity")||1.2),warp:Number(e.getAttribute("warp")||1.4),disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")}}function resolveColors(e){const{type:t,preset:r,colors:n}=e;if("prism"===t)return n;if("graphite"===t)return r&&m(r)?[...l(r).colors]:n.length>=3?n.slice(0,3):[...d];if(r&&!m(r))return o(r);if("fluid"===t&&n.length<5)return a;if("snow"===t||"flowers"===t||"confetti"===t){const e=p(t);return 3===n.length&&"#667eea"===n[0]&&"#764ba2"===n[1]?e:n}return n}function createLuminaOverlays(t,a){const r=document.createDocumentFragment();if(t>0){const a=document.createElement("div");a.className=`${f}__lumina-noise`,a.style.backgroundImage=`url("${e}")`,a.style.opacity=String(t),r.appendChild(a)}if(a){const e=document.createElement("div");e.className=`${f}__lumina-vignette`,r.appendChild(e)}return r}function syncLuminaOverlays(t,a,r){let n=t.querySelector(`.${f}__lumina-noise`),s=t.querySelector(`.${f}__lumina-vignette`);a>0?(n||(n=document.createElement("div"),n.className=`${f}__lumina-noise`,n.style.backgroundImage=`url("${e}")`,n.style.mixBlendMode="overlay",t.appendChild(n)),n.style.opacity=String(a)):n?.remove(),r?s||(s=document.createElement("div"),s.className=`${f}__lumina-vignette`,t.appendChild(s)):s?.remove()}function mountAnimationLayers(e,t){const a=resolveColors(t);let o={};if(t.disabled)return o;switch(t.type){case"particles":case"stars":case"snow":case"flowers":case"confetti":{const r=document.createElement("div");r.className=`${f}__canvas-layer`,e.appendChild(r);const n=new u(r,{type:t.type,colors:a,speed:t.speed,particleCount:t.particleCount,particleSize:t.particleSize,starCount:t.starCount,starSize:t.starSize,clickable:t.clickable,wind:t.wind,layerOpacity:t.opacity});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,particleCount:e.particleCount,particleSize:e.particleSize,starCount:e.starCount,starSize:e.starSize,clickable:e.clickable,wind:e.wind,layerOpacity:e.opacity})}};break}case"aurora":e.appendChild(function createMeshAuroraLayer(e,t,a,r,s){const i=document.createElement("div");i.className=`${f}__aurora-mesh`;const o="subtle"===r?.3:"medium"===r?.6:.8,l=n(t,5,1.25),d=e.length>=3?e:["#4f46e5","#ec4899","#06b6d4","#8b5cf6"],m="dark"===s?"screen":"multiply",p=`blur(${a}px)`,u=`${f}__aurora-blob`,g=[{backgroundColor:d[0],top:"-10%",left:"-10%",animationDuration:`${l}s`,animationDelay:"0s"},{backgroundColor:d[1],top:"-10%",right:"-10%",animationDuration:1.2*l+"s",animationDelay:"2s"},{backgroundColor:d[2],bottom:"-20%",left:"20%",animationDuration:1.5*l+"s",animationDelay:"4s"}];d[3]&&g.push({backgroundColor:d[3],bottom:"-10%",right:"-10%",animationDuration:1.1*l+"s",animationDelay:"1s"}),g.forEach(e=>{const t=document.createElement("div");t.className=u,Object.assign(t.style,{filter:p,opacity:String(o),mixBlendMode:m,...e}),i.appendChild(t)});const b=document.createElement("div");return b.className=`${f}__aurora-noise`,b.style.opacity="dark"===s?"0.03":"0.05",b.style.backgroundImage="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")",i.appendChild(b),i}(a,t.speed,t.blur,t.intensity,t.theme));break;case"plasma":e.appendChild(function createPlasmaLayer(e,t,a){const n=document.createElement("div");n.className=`${f}__plasma`;const o=Math.random().toString(36).slice(2,11),l=r(e),c=e=>l[e%l.length],d=i(t),m=s/d,p=document.createElement("style");p.textContent=`\n    @keyframes designbase-wc-plasma-move-1-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1); }\n      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }\n      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }\n      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1); }\n    }\n    @keyframes designbase-wc-plasma-move-2-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }\n      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }\n      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }\n    }\n    @keyframes designbase-wc-plasma-move-3-${o} {\n      0% { transform: translate(0, 0) scale(0.8); }\n      50% { transform: translate(15%, -15%) scale(1.4); }\n      100% { transform: translate(0, 0) scale(0.8); }\n    }\n    @keyframes designbase-wc-plasma-rotate-${o} {\n      0% { transform: rotate(0deg) scale(1.5); }\n      50% { transform: rotate(180deg) scale(2.0); }\n      100% { transform: rotate(360deg) scale(1.5); }\n    }`,n.appendChild(p);const u=document.createElement("div");return u.className=`${f}__plasma-base`,u.style.backgroundColor=c(0),n.appendChild(u),[{top:"-10%",left:"-10%",width:"70%",height:"70%",background:`radial-gradient(circle, ${c(1)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-1-${o} ${m}s infinite linear`},{bottom:"-20%",right:"-10%",width:"80%",height:"80%",background:`radial-gradient(circle, ${c(2)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-2-${o} ${m}s infinite linear`},{top:"20%",left:"20%",width:"60%",height:"60%",background:`radial-gradient(circle, ${c(3)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-rotate-${o} ${m}s infinite linear`,extraClass:`${f}__plasma-blob--exclusion`},{top:"40%",right:"20%",width:"40%",height:"40%",background:c(4),animation:`designbase-wc-plasma-move-3-${o} ${m}s infinite ease-in-out`,extraClass:`${f}__plasma-blob--accent`,filter:`blur(${a}px)`,opacity:"0.6"}].forEach(e=>{const t=document.createElement("div");t.className=`${f}__plasma-blob${e.extraClass?` ${e.extraClass}`:""}`,Object.assign(t.style,{filter:e.filter||`blur(${a}px)`,opacity:e.opacity||"0.9",...e}),n.appendChild(t)}),n}(a,t.speed,t.blur)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"prism":e.appendChild(function createPrismLayer(e,t,a,r){const n=document.createElement("div");n.className=`${f}__prism`;const o=Math.random().toString(36).slice(2,11),l=e.length?`conic-gradient(from 0deg at 50% 50%, ${e.map((t,a)=>`${t} ${Math.round(360/e.length*a)}deg`).join(", ")}, ${e[0]} 360deg)`:"var(--db-prism-gradient)",d=i(t),m=s/d,p=Math.min(56,Math.max(14,.4*a)),u=document.createElement("style");u.textContent=`\n    @keyframes designbase-wc-prism-drift-1-${o} {\n      0%   { transform: rotate(0deg) translate(0, 0) scale(1); }\n      50%  { transform: rotate(180deg) translate(6%, 4%) scale(1.12); }\n      100% { transform: rotate(360deg) translate(0, 0) scale(1); }\n    }\n    @keyframes designbase-wc-prism-drift-2-${o} {\n      0%   { transform: rotate(360deg) translate(0, 0) scale(1.05); }\n      50%  { transform: rotate(180deg) translate(-8%, 5%) scale(0.92); }\n      100% { transform: rotate(0deg) translate(0, 0) scale(1.05); }\n    }\n    @keyframes designbase-wc-prism-drift-3-${o} {\n      0%   { transform: rotate(0deg) translate(0, 0) scale(1.1); }\n      50%  { transform: rotate(-180deg) translate(4%, -6%) scale(1.28); }\n      100% { transform: rotate(-360deg) translate(0, 0) scale(1.1); }\n    }`,n.appendChild(u);const g=document.createElement("div");g.className=`${f}__prism-base`,g.style.background="var(--db-prism-dome)",n.appendChild(g);const b=[{size:"95%",top:"-34%",left:"-14%",opacity:.4,blur:p,anim:`designbase-wc-prism-drift-1-${o} ${m}s linear infinite`},{size:"80%",top:"38%",left:"58%",opacity:.3,blur:1.35*p,anim:`designbase-wc-prism-drift-2-${o} ${1.6*m}s linear infinite`},{size:"110%",top:"18%",left:"20%",opacity:.2,blur:1.9*p,anim:`designbase-wc-prism-drift-3-${o} ${2.4*m}s linear infinite`}];for(const e of b){const t=document.createElement("div");t.className=`${f}__prism-disc`,t.style.width=e.size,t.style.top=e.top,t.style.left=e.left,t.style.background=l,t.style.filter=`blur(${Math.round(e.blur)}px)`,t.style.opacity=String(e.opacity),t.style.animation=e.anim,n.appendChild(t)}return n}(a,t.speed,t.blur,t.theme)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"mesh-flow":case"fluid":case"radiant":case"ethereal":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new g(r,{variant:t.type,colors:a,speed:t.speed,blur:t.blur,noise:t.noise,zoom:t.zoom});e.appendChild(createLuminaOverlays(t.noise,t.showVignette)),o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,blur:e.blur,noise:e.noise,zoom:e.zoom})}};break}case"graphite":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new b(r,{colors:a,shaderSpeed:t.shaderSpeed,shaderIntensity:t.shaderIntensity,grain:t.noise,scale:t.zoom,warp:t.warp});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.noise,scale:e.zoom,warp:e.warp})}};break}}return o}function applyContainerStyles(e,a){const r=t(a.type),n="graphite"===a.type,s=r||n?"#000000":"dark"===a.theme?"var(--db-surface-base, #0f172a)":"var(--db-surface-base, #ffffff)";e.style.position="relative",e.style.overflow="hidden",e.style.backgroundColor=s,e.style.border="none"}export{f as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,mountAnimationLayers,parseAnimationBackgroundConfig,syncLuminaOverlays};
+import{isLuminaType as e,LUMINA_NOISE_SVG as t,FLUID_DEFAULT_COLORS as a,padColors as r,LUMINA_ANIMATION_DURATION_SEC as n,toAnimationDurationSec as s,toLuminaSpeed as i}from"./lumina-utils.js";import{getLuminaPresetColors as o}from"./lumina-presets.js";import{getGraphitePreset as l,GRAPHITE_DEFAULT_COLORS as d,isGraphitePresetId as m}from"./graphite-presets.js";import{getFallingParticleDefaults as p}from"./particle-defaults.js";import{CanvasAnimationController as u}from"./canvas-controller.js";import{ShaderAnimationController as g}from"./shader-controller.js";import{GraphiteShaderController as b}from"./graphite-controller.js";const f="designbase-wc-animation-background",h="graphite",y=new Set(["particles","stars","snow","flowers","confetti","aurora","plasma","mesh-flow","fluid","radiant","ethereal","graphite","prism"]);function parseColors(e,t){if(!e)return t;try{const a=JSON.parse(e);return Array.isArray(a)&&a.length?a:t}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}}function parseAnimationBackgroundConfig(e){const t=function normalizeAnimationType(e){return e&&"gradient"!==e&&y.has(e)?e:h}(e.getAttribute("type")),a="light"===e.getAttribute("theme")?"light":"dark",r=e.getAttribute("intensity")||"subtle",n=e.getAttribute("preset")||void 0,s=e.getAttribute("zoom"),i="graphite"===t;let o=Number(s||1);if(i&&null===s){const e=m(n)?n:"graphite";o=l(e).scale}return{type:t,theme:a,intensity:r,blur:Number(e.getAttribute("blur")||80),speed:Number(e.getAttribute("speed")||3e3),direction:e.getAttribute("direction")||"left",colors:parseColors(e.getAttribute("colors"),"prism"===t?[]:i?[...d]:["#667eea","#764ba2","#f093fb"]),opacity:Number(e.getAttribute("opacity")||1),particleCount:Number(e.getAttribute("particle-count")||("particles"===t?15:50)),particleSize:Number(e.getAttribute("particle-size")||2),starCount:Number(e.getAttribute("star-count")||100),starSize:Number(e.getAttribute("star-size")||1.5),clickable:e.hasAttribute("clickable")&&"false"!==e.getAttribute("clickable"),wind:Number(e.getAttribute("wind")||.5),noise:Number(e.getAttribute("noise")??(i?.1:.05)),showVignette:!e.hasAttribute("show-vignette")||"false"!==e.getAttribute("show-vignette"),preset:n||(i?"graphite":void 0),zoom:o,shaderSpeed:Number(e.getAttribute("shader-speed")||.4),shaderIntensity:Number(e.getAttribute("shader-intensity")||1.2),warp:Number(e.getAttribute("warp")||1.4),disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")}}function resolveColors(e){const{type:t,preset:r,colors:n}=e;if("prism"===t)return n;if("graphite"===t)return r&&m(r)?[...l(r).colors]:n.length>=3?n.slice(0,3):[...d];if(r&&!m(r))return o(r);if("fluid"===t&&n.length<5)return a;if("snow"===t||"flowers"===t||"confetti"===t){const e=p(t);return 3===n.length&&"#667eea"===n[0]&&"#764ba2"===n[1]?e:n}return n}function createLuminaOverlays(e,a){const r=document.createDocumentFragment();if(e>0){const a=document.createElement("div");a.className=`${f}__lumina-noise`,a.style.backgroundImage=`url("${t}")`,a.style.opacity=String(e),r.appendChild(a)}if(a){const e=document.createElement("div");e.className=`${f}__lumina-vignette`,r.appendChild(e)}return r}function syncLuminaOverlays(e,a,r){let n=e.querySelector(`.${f}__lumina-noise`),s=e.querySelector(`.${f}__lumina-vignette`);a>0?(n||(n=document.createElement("div"),n.className=`${f}__lumina-noise`,n.style.backgroundImage=`url("${t}")`,n.style.mixBlendMode="overlay",e.appendChild(n)),n.style.opacity=String(a)):n?.remove(),r?s||(s=document.createElement("div"),s.className=`${f}__lumina-vignette`,e.appendChild(s)):s?.remove()}function mountAnimationLayers(e,t){const a=resolveColors(t);let o={};if(t.disabled)return o;switch(t.type){case"particles":case"stars":case"snow":case"flowers":case"confetti":{const r=document.createElement("div");r.className=`${f}__canvas-layer`,e.appendChild(r);const n=new u(r,{type:t.type,colors:a,speed:t.speed,particleCount:t.particleCount,particleSize:t.particleSize,starCount:t.starCount,starSize:t.starSize,clickable:t.clickable,wind:t.wind,layerOpacity:t.opacity});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,particleCount:e.particleCount,particleSize:e.particleSize,starCount:e.starCount,starSize:e.starSize,clickable:e.clickable,wind:e.wind,layerOpacity:e.opacity})}};break}case"aurora":e.appendChild(function createMeshAuroraLayer(e,t,a,r,n){const i=document.createElement("div");i.className=`${f}__aurora-mesh`;const o="subtle"===r?.3:"medium"===r?.6:.8,l=s(t,5,1.25),d=e.length>=3?e:["#4f46e5","#ec4899","#06b6d4","#8b5cf6"],m="dark"===n?"screen":"multiply",p=`blur(${a}px)`,u=`${f}__aurora-blob`,g=[{backgroundColor:d[0],top:"-10%",left:"-10%",animationDuration:`${l}s`,animationDelay:"0s"},{backgroundColor:d[1],top:"-10%",right:"-10%",animationDuration:1.2*l+"s",animationDelay:"2s"},{backgroundColor:d[2],bottom:"-20%",left:"20%",animationDuration:1.5*l+"s",animationDelay:"4s"}];d[3]&&g.push({backgroundColor:d[3],bottom:"-10%",right:"-10%",animationDuration:1.1*l+"s",animationDelay:"1s"}),g.forEach(e=>{const t=document.createElement("div");t.className=u,Object.assign(t.style,{filter:p,opacity:String(o),mixBlendMode:m,...e}),i.appendChild(t)});const b=document.createElement("div");return b.className=`${f}__aurora-noise`,b.style.opacity="dark"===n?"0.03":"0.05",b.style.backgroundImage="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")",i.appendChild(b),i}(a,t.speed,t.blur,t.intensity,t.theme));break;case"plasma":e.appendChild(function createPlasmaLayer(e,t,a){const s=document.createElement("div");s.className=`${f}__plasma`;const o=Math.random().toString(36).slice(2,11),l=r(e),c=e=>l[e%l.length],d=i(t),m=n/d,p=document.createElement("style");p.textContent=`\n    @keyframes designbase-wc-plasma-move-1-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1); }\n      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }\n      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }\n      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1); }\n    }\n    @keyframes designbase-wc-plasma-move-2-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }\n      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }\n      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }\n    }\n    @keyframes designbase-wc-plasma-move-3-${o} {\n      0% { transform: translate(0, 0) scale(0.8); }\n      50% { transform: translate(15%, -15%) scale(1.4); }\n      100% { transform: translate(0, 0) scale(0.8); }\n    }\n    @keyframes designbase-wc-plasma-rotate-${o} {\n      0% { transform: rotate(0deg) scale(1.5); }\n      50% { transform: rotate(180deg) scale(2.0); }\n      100% { transform: rotate(360deg) scale(1.5); }\n    }`,s.appendChild(p);const u=document.createElement("div");return u.className=`${f}__plasma-base`,u.style.backgroundColor=c(0),s.appendChild(u),[{top:"-10%",left:"-10%",width:"70%",height:"70%",background:`radial-gradient(circle, ${c(1)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-1-${o} ${m}s infinite linear`},{bottom:"-20%",right:"-10%",width:"80%",height:"80%",background:`radial-gradient(circle, ${c(2)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-2-${o} ${m}s infinite linear`},{top:"20%",left:"20%",width:"60%",height:"60%",background:`radial-gradient(circle, ${c(3)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-rotate-${o} ${m}s infinite linear`,extraClass:`${f}__plasma-blob--exclusion`},{top:"40%",right:"20%",width:"40%",height:"40%",background:c(4),animation:`designbase-wc-plasma-move-3-${o} ${m}s infinite ease-in-out`,extraClass:`${f}__plasma-blob--accent`,filter:`blur(${a}px)`,opacity:"0.6"}].forEach(e=>{const t=document.createElement("div");t.className=`${f}__plasma-blob${e.extraClass?` ${e.extraClass}`:""}`,Object.assign(t.style,{filter:e.filter||`blur(${a}px)`,opacity:e.opacity||"0.9",...e}),s.appendChild(t)}),s}(a,t.speed,t.blur)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"prism":e.appendChild(function createPrismLayer(e,t,a,r){const s=document.createElement("div");s.className=`${f}__prism`;const o=Math.random().toString(36).slice(2,11),l=e.length?`conic-gradient(from 0deg at 50% 50%, ${e.map((t,a)=>`${t} ${Math.round(360/e.length*a)}deg`).join(", ")}, ${e[0]} 360deg)`:"var(--db-prism-gradient)",d=i(t),m=n/d,p=Math.min(56,Math.max(14,.4*a)),u=document.createElement("style");u.textContent=`\n    @keyframes designbase-wc-prism-drift-1-${o} {\n      0%   { transform: rotate(0deg) translate(0, 0) scale(1); }\n      50%  { transform: rotate(180deg) translate(6%, 4%) scale(1.12); }\n      100% { transform: rotate(360deg) translate(0, 0) scale(1); }\n    }\n    @keyframes designbase-wc-prism-drift-2-${o} {\n      0%   { transform: rotate(360deg) translate(0, 0) scale(1.05); }\n      50%  { transform: rotate(180deg) translate(-8%, 5%) scale(0.92); }\n      100% { transform: rotate(0deg) translate(0, 0) scale(1.05); }\n    }\n    @keyframes designbase-wc-prism-drift-3-${o} {\n      0%   { transform: rotate(0deg) translate(0, 0) scale(1.1); }\n      50%  { transform: rotate(-180deg) translate(4%, -6%) scale(1.28); }\n      100% { transform: rotate(-360deg) translate(0, 0) scale(1.1); }\n    }`,s.appendChild(u);const g=document.createElement("div");g.className=`${f}__prism-base`,g.style.background="var(--db-prism-dome)",s.appendChild(g);const b=[{size:"95%",top:"-34%",left:"-14%",opacity:.4,blur:p,anim:`designbase-wc-prism-drift-1-${o} ${m}s linear infinite`},{size:"80%",top:"38%",left:"58%",opacity:.3,blur:1.35*p,anim:`designbase-wc-prism-drift-2-${o} ${1.6*m}s linear infinite`},{size:"110%",top:"18%",left:"20%",opacity:.2,blur:1.9*p,anim:`designbase-wc-prism-drift-3-${o} ${2.4*m}s linear infinite`}];for(const e of b){const t=document.createElement("div");t.className=`${f}__prism-disc`,t.style.width=e.size,t.style.top=e.top,t.style.left=e.left,t.style.background=l,t.style.filter=`blur(${Math.round(e.blur)}px)`,t.style.opacity=String(e.opacity),t.style.animation=e.anim,s.appendChild(t)}return s}(a,t.speed,t.blur,t.theme)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"mesh-flow":case"fluid":case"radiant":case"ethereal":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new g(r,{variant:t.type,colors:a,speed:t.speed,blur:t.blur,noise:t.noise,zoom:t.zoom});e.appendChild(createLuminaOverlays(t.noise,t.showVignette)),o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,blur:e.blur,noise:e.noise,zoom:e.zoom})}};break}case"graphite":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new b(r,{colors:a,shaderSpeed:t.shaderSpeed,shaderIntensity:t.shaderIntensity,grain:t.noise,scale:t.zoom,warp:t.warp});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.noise,scale:e.zoom,warp:e.warp})}};break}}return o}function applyContainerStyles(t,a){const r=e(a.type),n="graphite"===a.type,s=r||n?"#000000":"dark"===a.theme?"var(--db-surface-base, #0f172a)":"var(--db-surface-base, #ffffff)";t.style.position="relative",t.style.overflow="hidden",t.style.backgroundColor=s,t.style.border="none"}export{f as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,mountAnimationLayers,parseAnimationBackgroundConfig,syncLuminaOverlays};

package/dist/esm/components/db-accordion.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.expanded=new Set,this.isRendering=!1,this.suppressExpandedAttrCallback=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandedItems(){const e=(this.getAttribute("expanded-items")||"").trim();if(!e)return[];if("all"===e)return this.items.map((e,t)=>this.resolveItemKey(e,t));try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(e=>String(e).trim()).filter(Boolean)}catch{}return e.split(",").map(e=>e.trim()).filter(Boolean)}set expandedItems(e){Array.isArray(e)?this.setAttribute("expanded-items",e.join(",")):this.setAttribute("expanded-items",e)}connectedCallback(){this.syncExpandedFromAttributes(),this.render(),this.childObserver=new MutationObserver(e=>{if(this.isRendering)return;e.some(e=>Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute("slot")))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("expanded-items"===e){if(this.suppressExpandedAttrCallback)return;return this.syncExpandedFromAttributes(),void this.syncExpandedState()}return"expand-mode"===e||"allow-multiple"===e?(this.syncExpandedFromAttributes(),void this.syncExpandedState()):"items"===e?(this.syncExpandedFromAttributes(),void this.render()):void this.render()}}resolveItemKey(e,t){return e.id??String(t)}getExpandMode(){const e=this.getAttribute("expand-mode");return"single"===e||"multiple"===e||"all"===e?e:(this.hasAttribute("allow-multiple"),"multiple")}syncExpandedFromAttributes(){const e=this.items.map((e,t)=>this.resolveItemKey(e,t)),t=this.expandedItems,n=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==n?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,n)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(n)||e.set(n,[]);const s=e.get(n);s.includes(t)||s.push(t)};return Array.from(this.children).forEach(e=>{const t=e.getAttribute("slot")?.match(/^content-(\d+)$/);t&&register(e,Number(t[1]))}),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((e,t)=>{const n=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");n&&Array.from(n.children).forEach(e=>register(e,t))}),e}isItemExpanded(e,t){return this.expanded.has(this.resolveItemKey(e,t))}syncExpandedState(){const e=this.items;this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((t,n)=>{const s=e[n];if(!s)return;const i=this.isItemExpanded(s,n);t.classList.toggle("designbase-wc-accordion__item--expanded",i),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(s.disabled));const a=t.querySelector(".designbase-wc-accordion__trigger"),d=t.querySelector(".designbase-wc-accordion__content");a?.setAttribute("aria-expanded",String(i)),d?.setAttribute("aria-hidden",String(!i))})}render(){this.isRendering=!0;const t=this.collectPanelContent(),n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",i=this.getExpandMode(),a=this.getAttribute("default-item-type")||"none",d=this.items,c=this.iconSize(s);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${n}`,`designbase-wc-accordion--${s}`,"multiple"===i&&"designbase-wc-accordion--multiple","single"===i&&"designbase-wc-accordion--single","all"===i&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label","아코디언"),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),d.forEach((s,i)=>{const d=this.resolveItemKey(s,i),r=this.isItemExpanded(s,i),o=document.createElement("div");o.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${n}`,r&&"designbase-wc-accordion__item--expanded",s.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),o.dataset.itemKey=d;const l=document.createElement("button");l.type="button",l.className="designbase-wc-accordion__trigger",l.disabled=Boolean(s.disabled),l.setAttribute("aria-expanded",String(r)),l.setAttribute("aria-controls",`accordion-content-${d}`),l.addEventListener("click",()=>{s.disabled||this.toggle(d)});const m=s.itemType||a;if("number"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${i+1}.`,l.append(e)}else if("question"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",l.append(e)}else if("icon"===m&&s.icon){const t=document.createElement("div");t.className="designbase-wc-accordion__icon",t.append(e(s.icon,c)),l.append(t)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=s.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(e("chevron-down",c)),l.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${d}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!r));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner";const g=t.get(i)||[];if(g.length>0)g.forEach(e=>{e.removeAttribute("slot"),b.append(e)});else if(s.content){const e=document.createElement("p");e.className="designbase-wc-accordion__content-text",e.textContent=s.content,b.append(e)}u.append(b),o.append(l,u),this.append(o)}),this.isRendering=!1}toggle(e){const t=this.getExpandMode();this.expanded.has(e)?this.expanded.delete(e):"single"===t?this.expanded=new Set([e]):this.expanded.add(e);const n=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=n,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:n},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};
+import{createDbIcon as e}from"./db-icons.js";import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ACCORDION_VARIANTS as s,ACCORDION_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.expanded=new Set,this.isRendering=!1,this.suppressExpandedAttrCallback=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandedItems(){const e=(this.getAttribute("expanded-items")||"").trim();if(!e)return[];if("all"===e)return this.items.map((e,t)=>this.resolveItemKey(e,t));try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(e=>String(e).trim()).filter(Boolean)}catch{}return e.split(",").map(e=>e.trim()).filter(Boolean)}set expandedItems(e){Array.isArray(e)?this.setAttribute("expanded-items",e.join(",")):this.setAttribute("expanded-items",e)}connectedCallback(){this.syncExpandedFromAttributes(),this.render(),this.childObserver=new MutationObserver(e=>{if(this.isRendering)return;e.some(e=>Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute("slot")))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("expanded-items"===e){if(this.suppressExpandedAttrCallback)return;return this.syncExpandedFromAttributes(),void this.syncExpandedState()}return"expand-mode"===e||"allow-multiple"===e?(this.syncExpandedFromAttributes(),void this.syncExpandedState()):"items"===e?(this.syncExpandedFromAttributes(),void this.render()):void this.render()}}resolveItemKey(e,t){return e.id??String(t)}getExpandMode(){const e=this.getAttribute("expand-mode");return"single"===e||"multiple"===e||"all"===e?e:(this.hasAttribute("allow-multiple"),"multiple")}syncExpandedFromAttributes(){const e=this.items.map((e,t)=>this.resolveItemKey(e,t)),t=this.expandedItems,s=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==s?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,s)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(s)||e.set(s,[]);const n=e.get(s);n.includes(t)||n.push(t)};return Array.from(this.children).forEach(e=>{const t=e.getAttribute("slot")?.match(/^content-(\d+)$/);t&&register(e,Number(t[1]))}),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((e,t)=>{const s=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");s&&Array.from(s.children).forEach(e=>register(e,t))}),e}isItemExpanded(e,t){return this.expanded.has(this.resolveItemKey(e,t))}syncExpandedState(){const e=this.items;this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((t,s)=>{const n=e[s];if(!n)return;const i=this.isItemExpanded(n,s);t.classList.toggle("designbase-wc-accordion__item--expanded",i),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(n.disabled));const a=t.querySelector(".designbase-wc-accordion__trigger"),d=t.querySelector(".designbase-wc-accordion__content");a?.setAttribute("aria-expanded",String(i)),d?.setAttribute("aria-hidden",String(!i))})}render(){this.isRendering=!0;const i=this.collectPanelContent(),a=t(this.getAttribute("variant"),s,"default"),d=t(this.getAttribute("size"),n,"m"),r=this.getExpandMode(),o=this.getAttribute("default-item-type")||"none",c=this.items,l=this.iconSize(d);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${a}`,`designbase-wc-accordion--${d}`,"multiple"===r&&"designbase-wc-accordion--multiple","single"===r&&"designbase-wc-accordion--single","all"===r&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label","아코디언"),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),c.forEach((t,s)=>{const n=this.resolveItemKey(t,s),d=this.isItemExpanded(t,s),r=document.createElement("div");r.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${a}`,d&&"designbase-wc-accordion__item--expanded",t.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),r.dataset.itemKey=n;const c=document.createElement("button");c.type="button",c.className="designbase-wc-accordion__trigger",c.disabled=Boolean(t.disabled),c.setAttribute("aria-expanded",String(d)),c.setAttribute("aria-controls",`accordion-content-${n}`),c.addEventListener("click",()=>{t.disabled||this.toggle(n)});const m=t.itemType||o;if("number"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${s+1}.`,c.append(e)}else if("question"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",c.append(e)}else if("icon"===m&&t.icon){const s=document.createElement("div");s.className="designbase-wc-accordion__icon",s.append(e(t.icon,l)),c.append(s)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=t.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(e("chevron-down",l)),c.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${n}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!d));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner";const g=i.get(s)||[];if(g.length>0)g.forEach(e=>{e.removeAttribute("slot"),b.append(e)});else if(t.content){const e=document.createElement("p");e.className="designbase-wc-accordion__content-text",e.textContent=t.content,b.append(e)}u.append(b),r.append(c,u),this.append(r)}),this.isRendering=!1}toggle(e){const t=this.getExpandMode();this.expanded.has(e)?this.expanded.delete(e):"single"===t?this.expanded=new Set([e]):this.expanded.add(e);const s=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=s,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:s},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};

package/dist/esm/components/db-activity-heatmap.js

@@ -1 +1 @@
-import{ACTIVITY_HEATMAP_SIZES as e,ACTIVITY_HEATMAP_COLOR_SCHEMES as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-activity-heatmap";class DbActivityHeatmap extends HTMLElement{constructor(){super(...arguments),this.handleClick=e=>{const t=e.target,n=t?.closest(`.${a}__cell`);if(!n||n.disabled)return;const s=n.dataset.date;if(!s)return;const r=Number(n.dataset.value??"0"),l=Number(n.dataset.level??"0");this.dispatchEvent(new CustomEvent("db-cell-click",{detail:{date:s,value:r,level:l},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["data","end-date","weeks","week-starts-on","size","locale","color-scheme","show-legend","show-month-labels","show-day-labels","legend-less-label","legend-more-label","value-label","max-value","footer-text","footer-href"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.render()}parseData(){const e=this.getAttribute("data");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&"string"==typeof e.date&&"number"==typeof e.value):[]}catch{return[]}}parseEndDate(){const e=this.getAttribute("end-date");if(e){const t=this.parseISODate(e);if(t)return t}const t=new Date;return new Date(t.getFullYear(),t.getMonth(),t.getDate())}parseISODate(e){const t=/^(\d{4})-(\d{2})-(\d{2})/.exec(e.trim());if(!t)return null;const a=Number(t[1]),n=Number(t[2]),s=Number(t[3]);return a&&n&&s?new Date(a,n-1,s):null}formatISODate(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}startOfWeek(e,t){const a=(e.getDay()-t+7)%7;return this.addDays(e,-a)}isAfter(e,t){return e.getTime()>t.getTime()}buildWeeks(e,t,a){const n=this.startOfWeek(e,a),s=this.addDays(n,7*-(t-1)),r=[];for(let e=0;e<t;e+=1){const t=[];for(let a=0;a<7;a+=1)t.push(this.addDays(s,7*e+a));r.push(t)}return r}resolveLevel(e,t,a){if(e<=0||t<=0)return 0;const n=e/t;return Math.min(a,Math.max(1,Math.ceil(n*a)))}formatMonthLabel(e,t){return new Intl.DateTimeFormat(t,{month:"short"}).format(e)}formatTooltip(e,t,a,n){const s=new Intl.DateTimeFormat(a,{year:"numeric",month:"long",day:"numeric"}).format(e);return t<=0?`${s}: 활동 없음`:`${s}: ${t.toLocaleString(a)}${n}`}getDayLabels(e,t){const a=Array.from({length:7},(a,n)=>{const s=new Date(2024,0,7+(e+n)%7);return new Intl.DateTimeFormat(t,{weekday:"short"}).format(s)}),n=1===e?[0,2,4,6]:[1,3,5,0];return a.map((e,t)=>n.includes(t)?e:"")}getMonthLabels(e,t){const a=e.map(e=>{const t=e.find(e=>e.getDate()<=7)??e[0];return t.getMonth()+12*t.getFullYear()}),n=e.map(()=>"");let s=0;for(;s<e.length;){const r=a[s];let l=s+1;for(;l<e.length&&a[l]===r;)l+=1;if(l-s>=2){const a=e[s],r=a.find(e=>e.getDate()<=7)??a[0];n[s]=this.formatMonthLabel(r,t)}s=l}return n}render(){const n=this.parseData(),s=new Map(n.map(e=>[e.date,e.value])),r=this.parseEndDate(),l=Math.max(1,Number(this.getAttribute("weeks")??"53")||53),o="0"===this.getAttribute("week-starts-on")?0:1,i=this.getAttribute("size")||"m",c=e.includes(i)?i:"m",d=this.getAttribute("locale")||"ko-KR",m=this.getAttribute("color-scheme")||"green",u=t.includes(m)?m:"green",h="false"!==this.getAttribute("show-legend"),p="false"!==this.getAttribute("show-month-labels"),b="false"!==this.getAttribute("show-day-labels"),g=this.getAttribute("legend-less-label")||"적음",f=this.getAttribute("legend-more-label")||"많음",_=this.getAttribute("value-label")||"회",v=this.getAttribute("footer-text")||"",$=this.getAttribute("footer-href")||"",E=this.getAttribute("max-value"),A=n.map(e=>e.value).filter(e=>e>0),D=A.length?Math.max(...A):0,y=E?Math.max(Number(E)||0,D):D,N=this.buildWeeks(r,l,o),w=this.getMonthLabels(N,d),k=this.getDayLabels(o,d);this.className=[a,`${a}--size-${c}`,`${a}--color-${u}`,h&&`${a}--with-legend`].filter(Boolean).join(" "),this.replaceChildren();const x=document.createElement("div");x.className=`${a}__viewport`;const C=document.createElement("div");if(C.className=`${a}__scroll-inner`,b){const e=document.createElement("div");e.className=`${a}__sticky-rail`;const t=document.createElement("div");t.className=`${a}__sticky-spacer`,p||t.classList.add(`${a}__sticky-spacer--hidden`);const n=document.createElement("div");n.className=`${a}__days`,n.setAttribute("aria-hidden","true"),k.forEach(e=>{const t=document.createElement("span");t.className=`${a}__day`,t.textContent=e,n.append(t)}),e.append(t,n),C.append(e)}const M=document.createElement("div");if(M.className=`${a}__grid-area`,p){const e=document.createElement("div");e.className=`${a}__months`,e.setAttribute("aria-hidden","true"),w.forEach(t=>{const n=document.createElement("span");n.className=`${a}__month`,n.textContent=t,e.append(n)}),M.append(e)}const L=document.createElement("div");if(L.className=`${a}__weeks`,L.setAttribute("role","grid"),L.setAttribute("aria-label","활동 히트맵"),N.forEach(e=>{const t=document.createElement("div");t.className=`${a}__week`,t.setAttribute("role","row"),e.forEach(e=>{const n=this.formatISODate(e),l=this.isAfter(e,r),o=l?0:s.get(n)??0,i=l?0:this.resolveLevel(o,y,4),c=document.createElement("button");c.type="button",c.className=[`${a}__cell`,`${a}__cell--level-${i}`,l&&`${a}__cell--future`].filter(Boolean).join(" "),c.dataset.date=n,c.dataset.value=String(o),c.dataset.level=String(i),c.title=this.formatTooltip(e,o,d,_),c.setAttribute("aria-label",this.formatTooltip(e,o,d,_)),c.disabled=l,t.append(c)}),L.append(t)}),M.append(L),C.append(M),x.append(C),this.append(x),h||v){const e=document.createElement("div");if(e.className=`${a}__footer`,v)if($){const t=document.createElement("a");t.className=`${a}__footer-link`,t.href=$,t.textContent=v,e.append(t)}else{const t=document.createElement("span");t.className=`${a}__footer-text`,t.textContent=v,e.append(t)}else e.append(document.createElement("span"));if(h){const t=document.createElement("div");t.className=`${a}__legend`,t.setAttribute("aria-hidden","true");const n=document.createElement("span");n.className=`${a}__legend-label`,n.textContent=g;const s=document.createElement("div");s.className=`${a}__legend-scale`;for(let e=0;e<=4;e+=1){const t=document.createElement("span");t.className=`${a}__legend-cell ${a}__legend-cell--level-${e}`,s.append(t)}const r=document.createElement("span");r.className=`${a}__legend-label`,r.textContent=f,t.append(n,s,r),e.append(t)}this.append(e)}}}customElements.get("db-activity-heatmap")||customElements.define("db-activity-heatmap",DbActivityHeatmap);export{DbActivityHeatmap};
+import{sanitizeHref as e}from"../core/safe-url.js";import{ACTIVITY_HEATMAP_SIZES as t,ACTIVITY_HEATMAP_COLOR_SCHEMES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s="designbase-wc-activity-heatmap";class DbActivityHeatmap extends HTMLElement{constructor(){super(...arguments),this.handleClick=e=>{const t=e.target,a=t?.closest(`.${s}__cell`);if(!a||a.disabled)return;const n=a.dataset.date;if(!n)return;const r=Number(a.dataset.value??"0"),l=Number(a.dataset.level??"0");this.dispatchEvent(new CustomEvent("db-cell-click",{detail:{date:n,value:r,level:l},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["data","end-date","weeks","week-starts-on","size","locale","color-scheme","show-legend","show-month-labels","show-day-labels","legend-less-label","legend-more-label","value-label","max-value","footer-text","footer-href"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.render()}parseData(){const e=this.getAttribute("data");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&"string"==typeof e.date&&"number"==typeof e.value):[]}catch{return[]}}parseEndDate(){const e=this.getAttribute("end-date");if(e){const t=this.parseISODate(e);if(t)return t}const t=new Date;return new Date(t.getFullYear(),t.getMonth(),t.getDate())}parseISODate(e){const t=/^(\d{4})-(\d{2})-(\d{2})/.exec(e.trim());if(!t)return null;const a=Number(t[1]),s=Number(t[2]),n=Number(t[3]);return a&&s&&n?new Date(a,s-1,n):null}formatISODate(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}startOfWeek(e,t){const a=(e.getDay()-t+7)%7;return this.addDays(e,-a)}isAfter(e,t){return e.getTime()>t.getTime()}buildWeeks(e,t,a){const s=this.startOfWeek(e,a),n=this.addDays(s,7*-(t-1)),r=[];for(let e=0;e<t;e+=1){const t=[];for(let a=0;a<7;a+=1)t.push(this.addDays(n,7*e+a));r.push(t)}return r}resolveLevel(e,t,a){if(e<=0||t<=0)return 0;const s=e/t;return Math.min(a,Math.max(1,Math.ceil(s*a)))}formatMonthLabel(e,t){return new Intl.DateTimeFormat(t,{month:"short"}).format(e)}formatTooltip(e,t,a,s){const n=new Intl.DateTimeFormat(a,{year:"numeric",month:"long",day:"numeric"}).format(e);return t<=0?`${n}: 활동 없음`:`${n}: ${t.toLocaleString(a)}${s}`}getDayLabels(e,t){const a=Array.from({length:7},(a,s)=>{const n=new Date(2024,0,7+(e+s)%7);return new Intl.DateTimeFormat(t,{weekday:"short"}).format(n)}),s=1===e?[0,2,4,6]:[1,3,5,0];return a.map((e,t)=>s.includes(t)?e:"")}getMonthLabels(e,t){const a=e.map(e=>{const t=e.find(e=>e.getDate()<=7)??e[0];return t.getMonth()+12*t.getFullYear()}),s=e.map(()=>"");let n=0;for(;n<e.length;){const r=a[n];let l=n+1;for(;l<e.length&&a[l]===r;)l+=1;if(l-n>=2){const a=e[n],r=a.find(e=>e.getDate()<=7)??a[0];s[n]=this.formatMonthLabel(r,t)}n=l}return s}render(){const n=this.parseData(),r=new Map(n.map(e=>[e.date,e.value])),l=this.parseEndDate(),o=Math.max(1,Number(this.getAttribute("weeks")??"53")||53),i="0"===this.getAttribute("week-starts-on")?0:1,c=this.getAttribute("size")||"m",d=t.includes(c)?c:"m",m=this.getAttribute("locale")||"ko-KR",u=this.getAttribute("color-scheme")||"green",h=a.includes(u)?u:"green",p="false"!==this.getAttribute("show-legend"),b="false"!==this.getAttribute("show-month-labels"),g="false"!==this.getAttribute("show-day-labels"),f=this.getAttribute("legend-less-label")||"적음",_=this.getAttribute("legend-more-label")||"많음",v=this.getAttribute("value-label")||"회",$=this.getAttribute("footer-text")||"",E=this.getAttribute("footer-href")||"",A=this.getAttribute("max-value"),D=n.map(e=>e.value).filter(e=>e>0),y=D.length?Math.max(...D):0,N=A?Math.max(Number(A)||0,y):y,w=this.buildWeeks(l,o,i),k=this.getMonthLabels(w,m),x=this.getDayLabels(i,m);this.className=[s,`${s}--size-${d}`,`${s}--color-${h}`,p&&`${s}--with-legend`].filter(Boolean).join(" "),this.replaceChildren();const C=document.createElement("div");C.className=`${s}__viewport`;const M=document.createElement("div");if(M.className=`${s}__scroll-inner`,g){const e=document.createElement("div");e.className=`${s}__sticky-rail`;const t=document.createElement("div");t.className=`${s}__sticky-spacer`,b||t.classList.add(`${s}__sticky-spacer--hidden`);const a=document.createElement("div");a.className=`${s}__days`,a.setAttribute("aria-hidden","true"),x.forEach(e=>{const t=document.createElement("span");t.className=`${s}__day`,t.textContent=e,a.append(t)}),e.append(t,a),M.append(e)}const L=document.createElement("div");if(L.className=`${s}__grid-area`,b){const e=document.createElement("div");e.className=`${s}__months`,e.setAttribute("aria-hidden","true"),k.forEach(t=>{const a=document.createElement("span");a.className=`${s}__month`,a.textContent=t,e.append(a)}),L.append(e)}const S=document.createElement("div");if(S.className=`${s}__weeks`,S.setAttribute("role","grid"),S.setAttribute("aria-label","활동 히트맵"),w.forEach(e=>{const t=document.createElement("div");t.className=`${s}__week`,t.setAttribute("role","row"),e.forEach(e=>{const a=this.formatISODate(e),n=this.isAfter(e,l),o=n?0:r.get(a)??0,i=n?0:this.resolveLevel(o,N,4),c=document.createElement("button");c.type="button",c.className=[`${s}__cell`,`${s}__cell--level-${i}`,n&&`${s}__cell--future`].filter(Boolean).join(" "),c.dataset.date=a,c.dataset.value=String(o),c.dataset.level=String(i),c.title=this.formatTooltip(e,o,m,v),c.setAttribute("aria-label",this.formatTooltip(e,o,m,v)),c.disabled=n,t.append(c)}),S.append(t)}),L.append(S),M.append(L),C.append(M),this.append(C),p||$){const t=document.createElement("div");if(t.className=`${s}__footer`,$)if(E){const a=document.createElement("a");a.className=`${s}__footer-link`,a.href=e(E,"#"),a.textContent=$,t.append(a)}else{const e=document.createElement("span");e.className=`${s}__footer-text`,e.textContent=$,t.append(e)}else t.append(document.createElement("span"));if(p){const e=document.createElement("div");e.className=`${s}__legend`,e.setAttribute("aria-hidden","true");const a=document.createElement("span");a.className=`${s}__legend-label`,a.textContent=f;const n=document.createElement("div");n.className=`${s}__legend-scale`;for(let e=0;e<=4;e+=1){const t=document.createElement("span");t.className=`${s}__legend-cell ${s}__legend-cell--level-${e}`,n.append(t)}const r=document.createElement("span");r.className=`${s}__legend-label`,r.textContent=_,e.append(a,n,r),t.append(e)}this.append(t)}}}customElements.get("db-activity-heatmap")||customElements.define("db-activity-heatmap",DbActivityHeatmap);export{DbActivityHeatmap};

package/dist/esm/components/db-ad-banner.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-ad-banner",i={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},s={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},n={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},r="star-filled",a={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","size","title","subtitle","cta-text","image","image-alt","href","target","auto-close","close-delay","background","animation-type","grid-type","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){const t=this.getAttribute("variant")||"primary";return["primary","secondary","success","warning","error"].includes(t)?t:"primary"}getSize(){const t=this.getAttribute("size")||"m";return["s","m","l"].includes(t)?t:"m"}ctaButtonSize(t,e){return"card"===t?"s":"floating"===t?"s"===e?"s":"m":e}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${e}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",16)),this.closeBtn.addEventListener("click",t=>{t.stopPropagation(),this.handleClose()}),this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.imageEl.loading="lazy";const i=document.createElement("div");i.className=`${e}__main`,this.mainEl=i,this.iconEl=document.createElement("div"),this.iconEl.className=`${e}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${e}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`;const s=document.createElement("div");s.className=`${e}__text`,this.textEl=s,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${e}__countdown`,s.append(this.titleEl,this.subtitleEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${e}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),i.append(s,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,i,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl),this.contentEl.addEventListener("click",t=>{"topbar"===this.getType()&&(t.target?.closest(`.${e}__close`)||this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0})))})}handleClose(){this.visible=!1,this.style.display="none",this.setAttribute("open","false"),this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}getBackground(){const t=this.getAttribute("background");return t&&["solid","gradient","animation","grid"].includes(t)?t:this.getBool("use-random-gradient")?"gradient":"solid"}ensureAnimBg(){if(!this.animBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-animation-background");i.className=`${e}__anim-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.animBgEl=t,this.animBgInner=i}return this.animBgEl}ensureGridBg(){if(!this.gridBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-grid-background");i.className=`${e}__grid-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.gridBgEl=t,this.gridBgInner=i}return this.gridBgEl}clearBackdrop(t){"gradient"!==t&&this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),"animation"!==t&&this.animBgEl&&(this.animBgEl.remove(),this.animBgEl=void 0,this.animBgInner=void 0),"grid"!==t&&this.gridBgEl&&(this.gridBgEl.remove(),this.gridBgEl=void 0,this.gridBgInner=void 0)}renderBackground(t,i){if(!this.rootEl||!this.contentEl)return;if(this.clearBackdrop(t),"gradient"===t){this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${e}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%"));const t=this.getAttribute("gradient-tone")||"vivid",s=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated");return this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||a[i]),this.gradientEl.setAttribute("tone",t),this.gradientEl.setAttribute("animated",s?"true":"false"),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),void(this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl))}const s=[];if("animation"===t){const t=this.ensureAnimBg();this.animBgInner?.setAttribute("type",this.getAttribute("animation-type")||"graphite"),this.animBgInner?.setAttribute("theme","dark"),s.push(t)}else if("grid"===t){const t=this.ensureGridBg();this.gridBgInner?.setAttribute("type",this.getAttribute("grid-type")||"lines"),this.gridBgInner?.setAttribute("color","var(--db-text-inverse-primary)"),this.gridBgInner?.setAttribute("opacity","0.18"),this.gridBgInner?.setAttribute("fade","vignette"),this.gridBgInner?.setAttribute("animated",""),s.push(t)}const n=[...s,this.contentEl],r=Array.from(this.rootEl.children);r.length===n.length&&n.every((t,e)=>r[e]===t)||this.rootEl.replaceChildren(...n)}syncIcon(e){this.mainEl&&this.textEl&&this.iconEl&&("card"===e?(this.iconEl.replaceChildren(t(r,32)),this.iconEl.parentElement!==this.mainEl&&this.mainEl.insertBefore(this.iconEl,this.textEl)):this.iconEl.remove())}syncBadge(t){this.textEl&&this.badgeEl&&("floating"===t?this.badgeEl.parentElement!==this.textEl&&this.textEl.insertBefore(this.badgeEl,this.textEl.firstChild):this.badgeEl.remove())}syncImage(t,e){this.contentEl&&this.imageEl&&this.mainEl&&("floating"===t&&e?(this.imageEl.src=e,this.imageEl.alt=this.getAttribute("image-alt")||"",this.imageEl.parentElement!==this.contentEl&&this.contentEl.insertBefore(this.imageEl,this.mainEl)):this.imageEl.remove())}syncLink(t,i){if(!this.contentEl)return;if("topbar"!==t||!i)return void this.linkEl?.remove();this.linkEl||(this.linkEl=document.createElement("a"),this.linkEl.className=`${e}__link`),this.linkEl.setAttribute("href",i);const s=this.getAttribute("target");s?this.linkEl.setAttribute("target",s):this.linkEl.removeAttribute("target"),this.linkEl.setAttribute("aria-label",this.titleEl?.textContent||"배너 링크"),this.linkEl.parentElement!==this.contentEl&&this.contentEl.append(this.linkEl)}syncCountdown(t,e){this.textEl&&this.countdownWrapEl&&(t&&e?(this.countdownEl||(this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.replaceChildren(this.countdownEl)),this.countdownEl.setAttribute("end-date",e),this.countdownWrapEl.parentElement!==this.textEl&&this.textEl.append(this.countdownWrapEl)):this.countdownWrapEl.remove())}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.style.display="none");this.style.display="block";const t=this.getType(),r=this.getVariant(),a=this.getSize(),l=this.getAttribute("title")||i[t],o=this.getAttribute("subtitle")||s[t],h=this.getAttribute("cta-text")||n[t],c=this.getBool("auto-close"),d=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),g=this.getBackground(),E=this.getAttribute("gradient-tone")||"vivid",u=this.getBool("show-countdown"),m=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[e,`${e}--type-${t}`,`${e}--variant-${r}`,`${e}--size-${a}`,`${e}--bg-${g}`,c&&`${e}--auto-close`,"gradient"===g&&`${e}--with-gradient`,"gradient"===g&&"light"===E&&`${e}--gradient-light`].filter(Boolean).join(" ")),this.renderBackground(g,r),this.syncIcon(t),this.syncBadge(t),this.syncImage(t,this.getAttribute("image")),this.syncLink(t,this.getAttribute("href")),this.titleEl&&(this.titleEl.textContent=l),this.subtitleEl&&(this.subtitleEl.textContent=o),this.syncCountdown(u,m),this.actionsEl&&(this.actionsEl.hidden="topbar"===t),this.ctaEl&&(this.ctaEl.textContent=h,this.ctaEl.setAttribute("size",this.ctaButtonSize(t,a)),"floating"===t?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!c),this.progressBarEl&&c&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),c&&this.startAutoClose(d)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};
+import{createDbIcon as t}from"./db-icons.js";import{sanitizeHref as e}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{AD_BANNER_VARIANTS as s,AD_BANNER_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r="designbase-wc-ad-banner",a={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},l={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},o={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},h="star-filled",d={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","size","title","subtitle","cta-text","image","image-alt","href","target","auto-close","close-delay","background","animation-type","grid-type","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){return i(this.getAttribute("variant"),s,"primary")}getSize(){return i(this.getAttribute("size"),n,"m")}ctaButtonSize(t,e){return"card"===t?"s":"floating"===t?"s"===e?"s":"m":e}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${r}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${r}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",16)),this.closeBtn.addEventListener("click",t=>{t.stopPropagation(),this.handleClose()}),this.imageEl=document.createElement("img"),this.imageEl.className=`${r}__image`,this.imageEl.loading="lazy";const e=document.createElement("div");e.className=`${r}__main`,this.mainEl=e,this.iconEl=document.createElement("div"),this.iconEl.className=`${r}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${r}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${r}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${r}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${r}__subtitle`;const i=document.createElement("div");i.className=`${r}__text`,this.textEl=i,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${r}__countdown`,i.append(this.titleEl,this.subtitleEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${r}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${r}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),e.append(i,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${r}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${r}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,e,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl),this.contentEl.addEventListener("click",t=>{"topbar"===this.getType()&&(t.target?.closest(`.${r}__close`)||this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0})))})}handleClose(){this.visible=!1,this.style.display="none",this.setAttribute("open","false"),this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}getBackground(){const t=this.getAttribute("background");return t&&["solid","gradient","animation","grid"].includes(t)?t:this.getBool("use-random-gradient")?"gradient":"solid"}ensureAnimBg(){if(!this.animBgEl){const t=document.createElement("div");t.className=`${r}__backdrop`;const e=document.createElement("db-animation-background");e.className=`${r}__anim-bg`,e.setAttribute("width","100%"),e.setAttribute("height","100%"),t.append(e),this.animBgEl=t,this.animBgInner=e}return this.animBgEl}ensureGridBg(){if(!this.gridBgEl){const t=document.createElement("div");t.className=`${r}__backdrop`;const e=document.createElement("db-grid-background");e.className=`${r}__grid-bg`,e.setAttribute("width","100%"),e.setAttribute("height","100%"),t.append(e),this.gridBgEl=t,this.gridBgInner=e}return this.gridBgEl}clearBackdrop(t){"gradient"!==t&&this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),"animation"!==t&&this.animBgEl&&(this.animBgEl.remove(),this.animBgEl=void 0,this.animBgInner=void 0),"grid"!==t&&this.gridBgEl&&(this.gridBgEl.remove(),this.gridBgEl=void 0,this.gridBgInner=void 0)}renderBackground(t,e){if(!this.rootEl||!this.contentEl)return;if(this.clearBackdrop(t),"gradient"===t){this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${r}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%"));const t=this.getAttribute("gradient-tone")||"vivid",i=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated");return this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||d[e]),this.gradientEl.setAttribute("tone",t),this.gradientEl.setAttribute("animated",i?"true":"false"),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),void(this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl))}const i=[];if("animation"===t){const t=this.ensureAnimBg();this.animBgInner?.setAttribute("type",this.getAttribute("animation-type")||"graphite"),this.animBgInner?.setAttribute("theme","dark"),i.push(t)}else if("grid"===t){const t=this.ensureGridBg();this.gridBgInner?.setAttribute("type",this.getAttribute("grid-type")||"lines"),this.gridBgInner?.setAttribute("color","var(--db-text-inverse-primary)"),this.gridBgInner?.setAttribute("opacity","0.18"),this.gridBgInner?.setAttribute("fade","vignette"),this.gridBgInner?.setAttribute("animated",""),i.push(t)}const s=[...i,this.contentEl],n=Array.from(this.rootEl.children);n.length===s.length&&s.every((t,e)=>n[e]===t)||this.rootEl.replaceChildren(...s)}syncIcon(e){this.mainEl&&this.textEl&&this.iconEl&&("card"===e?(this.iconEl.replaceChildren(t(h,32)),this.iconEl.parentElement!==this.mainEl&&this.mainEl.insertBefore(this.iconEl,this.textEl)):this.iconEl.remove())}syncBadge(t){this.textEl&&this.badgeEl&&("floating"===t?this.badgeEl.parentElement!==this.textEl&&this.textEl.insertBefore(this.badgeEl,this.textEl.firstChild):this.badgeEl.remove())}syncImage(t,e){this.contentEl&&this.imageEl&&this.mainEl&&("floating"===t&&e?(this.imageEl.src=e,this.imageEl.alt=this.getAttribute("image-alt")||"",this.imageEl.parentElement!==this.contentEl&&this.contentEl.insertBefore(this.imageEl,this.mainEl)):this.imageEl.remove())}syncLink(t,i){if(!this.contentEl)return;const s=e(i,"");if("topbar"!==t||!s)return void this.linkEl?.remove();this.linkEl||(this.linkEl=document.createElement("a"),this.linkEl.className=`${r}__link`),this.linkEl.setAttribute("href",s);const n=this.getAttribute("target");n?this.linkEl.setAttribute("target",n):this.linkEl.removeAttribute("target"),this.linkEl.setAttribute("aria-label",this.titleEl?.textContent||"배너 링크"),this.linkEl.parentElement!==this.contentEl&&this.contentEl.append(this.linkEl)}syncCountdown(t,e){this.textEl&&this.countdownWrapEl&&(t&&e?(this.countdownEl||(this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.replaceChildren(this.countdownEl)),this.countdownEl.setAttribute("end-date",e),this.countdownWrapEl.parentElement!==this.textEl&&this.textEl.append(this.countdownWrapEl)):this.countdownWrapEl.remove())}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.style.display="none");this.style.display="block";const t=this.getType(),e=this.getVariant(),i=this.getSize(),s=this.getAttribute("title")||a[t],n=this.getAttribute("subtitle")||l[t],h=this.getAttribute("cta-text")||o[t],d=this.getBool("auto-close"),c=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),g=this.getBackground(),E=this.getAttribute("gradient-tone")||"vivid",u=this.getBool("show-countdown"),m=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[r,`${r}--type-${t}`,`${r}--variant-${e}`,`${r}--size-${i}`,`${r}--bg-${g}`,d&&`${r}--auto-close`,"gradient"===g&&`${r}--with-gradient`,"gradient"===g&&"light"===E&&`${r}--gradient-light`].filter(Boolean).join(" ")),this.renderBackground(g,e),this.syncIcon(t),this.syncBadge(t),this.syncImage(t,this.getAttribute("image")),this.syncLink(t,this.getAttribute("href")),this.titleEl&&(this.titleEl.textContent=s),this.subtitleEl&&(this.subtitleEl.textContent=n),this.syncCountdown(u,m),this.actionsEl&&(this.actionsEl.hidden="topbar"===t),this.ctaEl&&(this.ctaEl.textContent=h,this.ctaEl.setAttribute("size",this.ctaButtonSize(t,i)),"floating"===t?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!d),this.progressBarEl&&d&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),d&&this.startAutoClose(c)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};

package/dist/esm/components/db-ai-chat.d.ts

@@ -9,7 +9,8 @@ interface DbArtifactOptions {
     title?: string;
     /** 헤더 부제(선택) */
     subtitle?: string;
-    /** 본문 HTML (setArtifactContent 로 요소를 직접 넣을 수도 있음) */
+    /** 허용 목록으로 정제할 본문 HTML (직접 요소를 넣으려면 setArtifactContent 사용) */
+    /** 허용 목록으로 정제할 HTML 본문 (text 대신) */
     html?: string;
     /** 인라인 카드와 동기화할 id (toggle 용) */
     id?: string;

package/dist/esm/components/db-ai-chat.js

@@ -1 +1 @@
-import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";const i="designbase-wc-ai-chat";let s=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${s+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?"voice"!==t&&"attach"!==t?"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.syncComposerToggles():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(i),this.replaceChildren(),this.mainEl=el("div",`${i}__main`),this.scrollEl=el("div",`${i}__scroll`),this.dockEl=el("div",`${i}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${i}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${i}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${i}__artifact-panel`),s=el("div",`${i}__artifact-header`),a=el("div",`${i}__artifact-titles`);this.artifactTitleEl=el("div",`${i}__artifact-title`),this.artifactSubtitleEl=el("div",`${i}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${i}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),s.append(a,r),this.artifactBodyEl=el("div",`${i}__artifact-body`),e.append(s,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${i}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${i}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${i}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${i}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${i}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${i}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${i}__turn`);e.dataset.id=t.id||"";const s=el("db-chat-message");return s.dataset.id=t.id||"",s.setAttribute("role",t.role||"assistant"),t.name&&s.setAttribute("name",t.name),t.time&&s.setAttribute("timestamp",t.time),t.avatarSrc&&s.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&s.setAttribute("avatar-initials",t.avatarInitials),t.actions&&s.setAttribute("actions",t.actions),t.status&&s.setAttribute("status",t.status),t.variant&&s.setAttribute("variant",t.variant),null!=t.html?s.innerHTML=t.html:s.textContent=t.text||"",s.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(s),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(s){const a=this.ensureArtifactId(s),r=el("button",`${i}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${s.title} 아티팩트 열기`);const n=el("span",`${i}__artifact-card-icon`),c=s.icon&&e(s.icon)?s.icon:"code";n.append(t(c,18));const l=el("div",`${i}__artifact-card-meta`);l.append(el("div",`${i}__artifact-card-title`,s.title)),s.subtitle&&l.append(el("div",`${i}__artifact-card-subtitle`,s.subtitle));const o=el("span",`${i}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(n,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(s)),r}syncArtifactCardStates(){this.querySelectorAll(`.${i}__artifact-card`).forEach(t=>{const e=t,s=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${i}__artifact-card--active`,s),e.setAttribute("aria-pressed",String(s))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${i}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${i}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${s+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const s=this._messages.find(e=>e.id===t);if(!s)return;Object.assign(s,e);const a=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!a)return;const r=a.querySelector(".designbase-wc-chat-message__content");if(!r||null==e.html&&null==e.text||(null!=e.html?r.innerHTML=e.html:r.textContent=e.text||""),e.status&&a.setAttribute("status",e.status),void 0!==e.artifact){const t=a.closest(`.${i}__turn`)||a.parentElement;t?.querySelector(`.${i}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&(this.artifactBodyEl.innerHTML=t.html),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};
+import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHtmlFragment as i}from"../core/safe-html.js";const s="designbase-wc-ai-chat";let a=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${a+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?"voice"!==t&&"attach"!==t?"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.syncComposerToggles():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(s),this.replaceChildren(),this.mainEl=el("div",`${s}__main`),this.scrollEl=el("div",`${s}__scroll`),this.dockEl=el("div",`${s}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${s}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${s}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${s}__artifact-panel`),i=el("div",`${s}__artifact-header`),a=el("div",`${s}__artifact-titles`);this.artifactTitleEl=el("div",`${s}__artifact-title`),this.artifactSubtitleEl=el("div",`${s}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${s}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),i.append(a,r),this.artifactBodyEl=el("div",`${s}__artifact-body`),e.append(i,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${s}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${s}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${s}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${s}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${s}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${s}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${s}__turn`);e.dataset.id=t.id||"";const a=el("db-chat-message");return a.dataset.id=t.id||"",a.setAttribute("role",t.role||"assistant"),t.name&&a.setAttribute("name",t.name),t.time&&a.setAttribute("timestamp",t.time),t.avatarSrc&&a.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&a.setAttribute("avatar-initials",t.avatarInitials),t.actions&&a.setAttribute("actions",t.actions),t.status&&a.setAttribute("status",t.status),t.variant&&a.setAttribute("variant",t.variant),null!=t.html?a.replaceChildren(i(t.html)):a.textContent=t.text||"",a.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(a),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(i){const a=this.ensureArtifactId(i),r=el("button",`${s}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${i.title} 아티팩트 열기`);const n=el("span",`${s}__artifact-card-icon`),c=i.icon&&e(i.icon)?i.icon:"code";n.append(t(c,18));const l=el("div",`${s}__artifact-card-meta`);l.append(el("div",`${s}__artifact-card-title`,i.title)),i.subtitle&&l.append(el("div",`${s}__artifact-card-subtitle`,i.subtitle));const o=el("span",`${s}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(n,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(i)),r}syncArtifactCardStates(){this.querySelectorAll(`.${s}__artifact-card`).forEach(t=>{const e=t,i=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${s}__artifact-card--active`,i),e.setAttribute("aria-pressed",String(i))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${s}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${s}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${a+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const a=this._messages.find(e=>e.id===t);if(!a)return;Object.assign(a,e);const r=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!r)return;const n=r.querySelector(".designbase-wc-chat-message__content");if(!n||null==e.html&&null==e.text||(null!=e.html?n.replaceChildren(i(e.html)):n.textContent=e.text||""),e.status&&r.setAttribute("status",e.status),void 0!==e.artifact){const t=r.closest(`.${s}__turn`)||r.parentElement;t?.querySelector(`.${s}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&this.artifactBodyEl.replaceChildren(i(t.html)),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};

package/dist/esm/components/db-ai-glow.d.ts

@@ -0,0 +1,80 @@
+import { AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES } from '@designbasekorea/ui-contracts';
+import { DbElement } from '../core/base-element.js';
+
+type GlowSize = (typeof AI_GLOW_SIZES)[number];
+type GlowState = (typeof AI_GLOW_STATES)[number];
+type GlowVariant = (typeof AI_GLOW_VARIANTS)[number];
+/**
+ * AI 가 생각·작업·청취 중임을 알리는 테두리 글로우.
+ * iOS Siri·브라우저 에이전트처럼 가장자리 안쪽으로 여러 색 그라데이션이 번지며 흐른다.
+ * 콘텐츠 위에 떠 있지만 `pointer-events: none` 이라 조작을 막지 않는다.
+ *
+ * 기본은 뷰포트 전체(`position: fixed`). `contained` 를 주면 가장 가까운 positioned 조상 안에만
+ * 깔리고 모서리 둥글기도 부모를 따른다 — 부모에 `position: relative` 가 필요하다.
+ *
+ * `state="listening"` 은 음성 반응 모드다. `audioStream`(마이크 MediaStream) 또는
+ * `voice-level`(0–1) 을 넣으면 소리 크기에 맞춰 빛의 두께·밝기가 출렁인다.
+ * 둘 다 없으면 청취 중임을 알 수 있도록 말하는 듯한 잔잔한 움직임으로 대신한다.
+ *
+ * @example
+ *   <db-ai-glow active></db-ai-glow>
+ *
+ * @example
+ *   const glow = document.querySelector('db-ai-glow');
+ *   glow.state = 'listening';
+ *   glow.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ *   glow.active = true;
+ */
+declare class DbAiGlow extends DbElement {
+    static get observedAttributes(): string[];
+    private status;
+    private readonly meter;
+    private inputStream;
+    private rafId;
+    private lastFrame;
+    private startedAt;
+    private level;
+    get active(): boolean;
+    set active(value: boolean);
+    get state(): GlowState;
+    set state(value: GlowState);
+    get variant(): GlowVariant;
+    set variant(value: GlowVariant);
+    get size(): GlowSize;
+    set size(value: GlowSize);
+    get contained(): boolean;
+    set contained(value: boolean);
+    /** 외부 분석기가 전달하는 정규화 음성 레벨(0–1). `listening` 상태에서만 쓰인다. */
+    get voiceLevel(): number;
+    set voiceLevel(value: number);
+    /** 켜질 때 스크린 리더에 알릴 문구(예: "AI가 화면을 제어하는 중"). 없으면 순수 장식이다. */
+    get label(): string;
+    set label(value: string);
+    /**
+     * 실제 마이크/통화 MediaStream. 음량만 분석하며 트랙을 stop() 하지 않는다.
+     * null 을 넣으면 분석만 해제한다.
+     */
+    get audioStream(): MediaStream | null;
+    set audioStream(stream: MediaStream | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private onMotionChange;
+    /** 구조는 한 번만 만든다 (PERF-RECONCILE) */
+    private ensureStructure;
+    /** 소비자가 붙인 className 은 건드리지 않고 수식어만 교체한다 */
+    private syncClasses;
+    private syncStatus;
+    /** 음성 반응 루프는 청취 중 + 켜짐 + 모션 허용일 때만 돈다. 나머지 애니메이션은 전부 CSS 다. */
+    private syncLoop;
+    private stopLoop;
+    private frame;
+    private sampleLevel;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-glow': DbAiGlow;
+    }
+}
+
+export { DbAiGlow };

package/dist/esm/components/db-ai-glow.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{VoiceMeter as e}from"../core/voice-meter.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{AI_GLOW_STATES as i,AI_GLOW_VARIANTS as a,AI_GLOW_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r="designbase-wc-ai-glow",o=["haze","glow","edge"];function clamp(t,e,s){return Math.min(s,Math.max(e,t))}class DbAiGlow extends t{constructor(){super(...arguments),this.status=null,this.meter=new e,this.inputStream=null,this.rafId=0,this.lastFrame=0,this.startedAt=0,this.level=0,this.onMotionChange=()=>this.syncLoop(),this.frame=t=>{this.rafId=requestAnimationFrame(this.frame);const e=this.lastFrame?Math.min(.1,(t-this.lastFrame)/1e3):1/60;this.lastFrame=t;const s=Math.pow(this.sampleLevel((t-this.startedAt)/1e3),1.6),i=s>this.level?18:6,a=this.level+(s-this.level)*(1-Math.exp(-i*e));Math.abs(a-this.level)<.001||(this.level=a,this.style.setProperty("--db-ai-glow-level",a.toFixed(3)))}}static get observedAttributes(){return["active","state","variant","size","contained","voice-level","label"]}get active(){return this.hasAttribute("active")&&"false"!==this.getAttribute("active")}set active(t){this.toggleAttribute("active",Boolean(t))}get state(){return s(this.getAttribute("state"),i,"thinking")}set state(t){this.setAttribute("state",t)}get variant(){return s(this.getAttribute("variant"),a,"aurora")}set variant(t){this.setAttribute("variant",t)}get size(){return s(this.getAttribute("size"),n,"m")}set size(t){this.setAttribute("size",t)}get contained(){return this.hasAttribute("contained")&&"false"!==this.getAttribute("contained")}set contained(t){this.toggleAttribute("contained",Boolean(t))}get voiceLevel(){const t=this.getAttribute("voice-level");if(null===t||""===t.trim())return 0;const e=Number(t);return Number.isFinite(e)?clamp(e,0,1):0}set voiceLevel(t){const e=Number(t);this.setAttribute("voice-level",String(clamp(Number.isFinite(e)?e:0,0,1)))}get label(){return this.getAttribute("label")??""}set label(t){t?this.setAttribute("label",t):this.removeAttribute("label")}get audioStream(){return this.inputStream}set audioStream(t){const e=t&&"function"==typeof t.getAudioTracks?t:null;e!==this.inputStream&&(this.inputStream=e,this.meter.disconnect(),this.syncLoop())}connectedCallback(){this.upgradeProperties(["active","state","variant","size","contained","voiceLevel","label","audioStream"]),this.ensureStructure(),this.syncClasses(),this.syncStatus(),"undefined"!=typeof window&&"function"==typeof window.matchMedia&&this.cleanups.listen(window.matchMedia("(prefers-reduced-motion: reduce)"),"change",this.onMotionChange),this.syncLoop()}disconnectedCallback(){this.stopLoop(),super.disconnectedCallback()}attributeChangedCallback(t){this.status&&(this.syncClasses(),"active"!==t&&"label"!==t||this.syncStatus(),"active"!==t&&"state"!==t||this.syncLoop())}ensureStructure(){if(this.status)return;for(const t of Array.from(this.children))(t.classList.contains(`${r}__layer`)||t.classList.contains(`${r}__status`))&&t.remove();const t=document.createDocumentFragment();for(const e of o){const s=document.createElement("span");s.className=`${r}__layer ${r}__layer--${e}`,s.setAttribute("aria-hidden","true");const i=document.createElement("span");i.className=`${r}__ring`,s.append(i),t.append(s)}const e=document.createElement("span");e.className=`${r}__status`,e.setAttribute("role","status"),t.append(e),this.status=e,this.append(t)}syncClasses(){const t=[`${r}--${this.state}`,`${r}--${this.variant}`,`${r}--${this.size}`,this.active?`${r}--active`:"",this.contained?`${r}--contained`:""].filter(Boolean);for(const e of Array.from(this.classList))e.startsWith(`${r}--`)&&!t.includes(e)&&this.classList.remove(e);this.classList.add(r,...t)}syncStatus(){this.status&&(this.status.textContent=this.active?this.label:"")}syncLoop(){this.isConnected&&this.active&&"listening"===this.state&&!function prefersReducedMotion(){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}()?(this.inputStream&&!this.meter.connected&&this.meter.connect(this.inputStream),this.rafId||(this.startedAt=performance.now(),this.lastFrame=0,this.rafId=requestAnimationFrame(this.frame))):this.stopLoop()}stopLoop(){this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=0,this.meter.disconnect(),this.level=0,this.style.removeProperty("--db-ai-glow-level")}sampleLevel(t){if(this.meter.connected)return this.meter.read();if(this.hasAttribute("voice-level"))return this.voiceLevel;const e=Math.pow(Math.max(0,Math.sin(4.6*t)),2.8),s=Math.pow(Math.max(0,Math.sin(.9*t+.7)),2);return clamp(.05+.06*(Math.sin(1.7*t+.6)+1)+e*s*.7,0,1)}}customElements.get("db-ai-glow")||customElements.define("db-ai-glow",DbAiGlow);export{DbAiGlow};

package/dist/esm/components/db-alert.js

@@ -1 +1 @@
-import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",a="false"!==this.getAttribute("show-icon"),i="false"!==this.getAttribute("closable"),r=this.getAttribute("title")?.trim()||"",o=this.getAttribute("message")?.trim()||"",c=this.getAttribute("action-label"),l=this.getAttribute("action-variant")||"tertiary",d=this.parseActionButtons(),b=Boolean(o),m=Boolean(r),u=m&&!b||!m&&b,h=d.length>0?d:c?[{label:c,variant:l}]:[];this.className=[e,`${e}--${n}`,`${e}--${s}`,a&&`${e}--with-icon`,i&&`${e}--closable`,u&&`${e}--text-single`,h.length>0&&`${e}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${e}__content`)?.remove(),this.querySelector(`.${e}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const p=document.createElement("div");if(p.className=`${e}__content`,a){const a=document.createElement("div");a.className=`${e}__icon`,a.append(t(this.getIconName(n),"s"===s?16:"l"===s?24:20)),p.append(a)}const g=document.createElement("div");if(g.className=`${e}__body`,m){const t=document.createElement("div");t.className=`${e}__title`,t.textContent=r,g.append(t)}if(b){const t=document.createElement("div");t.className=`${e}__message`,t.textContent=o,g.append(t)}if(p.append(g),h.length>0){const t=document.createElement("div");t.className=`${e}__actions`;const n=document.createElement("div");n.className=`${e}__action-buttons`,h.forEach((t,e)=>{const a=document.createElement("db-button");a.setAttribute("variant",t.variant||"tertiary"),a.setAttribute("size",t.size||s),a.textContent=t.label,t.disabled&&a.setAttribute("disabled",""),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:e,label:t.label}}))}),n.append(a)}),t.append(n),p.append(t)}if(i){const n=document.createElement("button");n.type="button",n.className=`${e}__close`,n.setAttribute("aria-label","알림 닫기"),n.append(t("close",20)),n.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),p.append(n)}this.replaceChildren(p)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};
+import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ALERT_VARIANTS as n,ALERT_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const a=e(this.getAttribute("variant"),n,"default"),o=e(this.getAttribute("size"),s,"m"),r="false"!==this.getAttribute("show-icon"),c="false"!==this.getAttribute("closable"),l=this.getAttribute("title")?.trim()||"",d=this.getAttribute("message")?.trim()||"",b=this.getAttribute("action-label"),m=this.getAttribute("action-variant")||"tertiary",u=this.parseActionButtons(),h=Boolean(d),p=Boolean(l),g=p&&!h||!p&&h,v=u.length>0?u:b?[{label:b,variant:m}]:[];this.className=[i,`${i}--${a}`,`${i}--${o}`,r&&`${i}--with-icon`,c&&`${i}--closable`,g&&`${i}--text-single`,v.length>0&&`${i}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${i}__content`)?.remove(),this.querySelector(`.${i}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const A=document.createElement("div");if(A.className=`${i}__content`,r){const e=document.createElement("div");e.className=`${i}__icon`,e.append(t(this.getIconName(a),"s"===o?16:"l"===o?24:20)),A.append(e)}const _=document.createElement("div");if(_.className=`${i}__body`,p){const t=document.createElement("div");t.className=`${i}__title`,t.textContent=l,_.append(t)}if(h){const t=document.createElement("div");t.className=`${i}__message`,t.textContent=d,_.append(t)}if(A.append(_),v.length>0){const t=document.createElement("div");t.className=`${i}__actions`;const e=document.createElement("div");e.className=`${i}__action-buttons`,v.forEach((t,n)=>{const s=document.createElement("db-button");s.setAttribute("variant",t.variant||"tertiary"),s.setAttribute("size",t.size||o),s.textContent=t.label,t.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,label:t.label}}))}),e.append(s)}),t.append(e),A.append(t)}if(c){const e=document.createElement("button");e.type="button",e.className=`${i}__close`,e.setAttribute("aria-label","알림 닫기"),e.append(t("close",20)),e.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),A.append(e)}this.replaceChildren(A)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};

package/dist/esm/components/db-animation-background.js

@@ -1 +1 @@
-import{parseAnimationBackgroundConfig as t,mountAnimationLayers as e,applyContainerStyles as s,syncLuminaOverlays as n,ANIMATION_BACKGROUND_CLASS as i}from"./animation-background/layers.js";import{getControlsForType as o,resetControlsToDefaults as l,getControlSliderBounds as r,controlSliderToAttr as a,writeControlAttribute as c,readControlValue as d,controlAttrToSlider as h}from"./animation-background/controls.js";import{isGraphitePresetId as u,getGraphitePreset as p}from"./animation-background/graphite-presets.js";import{createDbIcon as m}from"./db-icons.js";const b=i,y=["particles","stars","snow","flowers","confetti","mesh-flow","fluid","radiant","ethereal","graphite"],g=["mesh-flow","fluid","radiant","ethereal"];class DbAnimationBackground extends HTMLElement{constructor(){super(...arguments),this.panelOpen=!1,this.controlInputs=new Map,this.syncingControls=!1,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.panelOpen&&(t.preventDefault(),this.panelOpen=!1,this.syncPanelState())}}static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","noise","show-vignette","preset","zoom","show-controls","shader-speed","shader-intensity","warp"]}connectedCallback(){this.style.display="block",this.render(),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.handleDocumentKeyDown),this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(t,e,s){this.isConnected&&e!==s&&("show-controls"!==t?this.syncingControls||("type"===t&&this.getBool("show-controls",!1)&&this.rebuildControlInputs(),this.applyConfig(),this.getBool("show-controls",!1)&&this.syncControlInputs()):this.syncControlsVisibility())}getBool(t,e=!1){return this.hasAttribute(t)?"false"!==this.getAttribute(t):e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getConfig(){return t(this)}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.mountedType=void 0,this.layersEl&&this.layersEl.replaceChildren()}remountLayers(t){this.layersEl&&(this.teardownLayers(),this.layerHandle=e(this.layersEl,t),this.mountedType=t.type)}canLiveUpdate(t){return this.mountedType===t.type&&y.includes(t.type)&&"function"==typeof this.layerHandle?.update}applyConfig(){const t=this.getConfig();this.className=[b,`${b}--${t.type}`,t.clickable&&!t.disabled&&`${b}--clickable`,t.disabled&&`${b}--disabled`,this.getBool("show-controls",!1)&&`${b}--show-controls`].filter(Boolean).join(" "),s(this,t);const e=this.getSizeStyle(this.getAttribute("width")),i=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));e&&(this.style.width=e),i&&(this.style.height=i),this.style.borderRadius=o||"0",this.style.border="none",this.style.opacity="",this.layersEl&&(this.layersEl.style.opacity=String(t.opacity));const l=this.getAttribute("blend-mode");if(l&&(this.style.mixBlendMode=l),t.disabled)return this.teardownLayers(),void this.syncClickable(t);this.canLiveUpdate(t)?(this.layerHandle?.update?.(t),this.layersEl&&g.includes(t.type)&&n(this.layersEl,t.noise,t.showVignette)):this.remountLayers(t),this.syncClickable(t)}syncClickable(t){this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),t.clickable&&!t.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}render(){if(!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${b}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${b}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.ensureControlsShell(),this.applyConfig(),this.syncControlsVisibility()}ensureControlsShell(){if(this.controlsRootEl)return;const t=document.createElement("div");t.className=`${b}__controls-root`,t.hidden=!0;const e=this.createIconButton("settings","컨트롤 열기",()=>{this.panelOpen=!this.panelOpen,this.syncPanelState()});e.setAttribute("variant","secondary"),e.className=`${b}__controls-gear`;const s=document.createElement("div");s.className=`${b}__controls-panel`,s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.hidden=!0,s.addEventListener("click",t=>t.stopPropagation());const n=document.createElement("div");n.className=`${b}__controls-head`;const i=document.createElement("span");i.className=`${b}__controls-title`,i.append(m("settings",14),document.createTextNode(" Controls"));const r=this.createIconButton("refresh","기본값으로 초기화",()=>{const t=this.getConfig(),e=o(t.type);if(this.syncingControls=!0,l(this,e),"graphite"===t.type){const t=p("graphite");this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig(),this.syncControlInputs()});r.className=`${b}__controls-icon-btn`,n.append(i,r),s.append(n),t.append(e,s),this.appendChild(t),this.controlsRootEl=t,this.panelEl=s}syncControlsVisibility(){if(!this.controlsRootEl)return;const t=this.getBool("show-controls",!1);this.controlsRootEl.hidden=!t,t?this.rebuildControlInputs():(this.panelOpen=!1,this.syncPanelState())}syncPanelState(){if(!this.controlsRootEl||!this.panelEl)return;const t=this.controlsRootEl.querySelector(`.${b}__controls-gear`);t&&(t.dataset.open=this.panelOpen?"true":"false",t.setAttribute("aria-expanded",this.panelOpen?"true":"false")),this.panelEl.hidden=!this.panelOpen}createIconButton(t,e,s){const n=document.createElement("db-button");return n.setAttribute("variant","tertiary"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon",t),n.setAttribute("aria-label",e),n.addEventListener("click",t=>{t.stopPropagation(),s()}),n}rebuildControlInputs(){if(!this.panelEl)return;this.panelEl.querySelectorAll(`.${b}__controls-field`).forEach(t=>t.remove()),this.controlInputs.clear();const t=this.getConfig(),e=o(t.type),s=this.panelEl.querySelector(`.${b}__controls-title`);s&&(s.lastChild?.remove(),s.append(document.createTextNode(` ${t.type}`))),e.forEach(t=>{const e=this.createControlField(t);this.panelEl?.appendChild(e)}),this.syncControlInputs()}createControlField(t){const e=document.createElement("div");if(e.className=`${b}__controls-field`,e.dataset.attr=t.attr,"range"===t.kind){const s=r(t),n=document.createElement("db-range-slider");return n.className=`${b}__controls-range`,n.setAttribute("size","s"),n.setAttribute("full-width",""),n.setAttribute("show-label",""),n.setAttribute("label",t.label),n.setAttribute("show-value",""),n.setAttribute("value-position","top"),n.setAttribute("show-thumb-tooltip",""),n.setAttribute("min",String(s.min)),n.setAttribute("max",String(s.max)),n.setAttribute("step",String(s.step)),null!=s.fixed&&n.setAttribute("value-fixed",String(s.fixed)),n.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,a(t,s.value))}),e.appendChild(n),this.controlInputs.set(t.attr,n),e}if("select"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=t.options??[];if(n.length>4){const i=document.createElement("db-select");i.className=`${b}__controls-select`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}else{const i=document.createElement("db-segment-control");i.className=`${b}__controls-seg`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}return e}if("toggle"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-toggle`;const n=document.createElement("span");n.textContent=t.label;const i=document.createElement("db-toggle");return i.setAttribute("size","s"),i.addEventListener("db-change",e=>{const s=e.detail;this.commitControlValue(t,Boolean(s.checked))}),s.append(n,i),e.appendChild(s),this.controlInputs.set(t.attr,i),e}const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=document.createElement("div");return n.className=`${b}__controls-colors`,e.append(s,n),this.controlInputs.set(t.attr,n),e}commitControlValue(t,e){if(this.syncingControls=!0,c(this,t,e),"preset"===t.attr&&"graphite"===this.getConfig().type&&"string"==typeof e&&u(e)){const t=p(e);this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig()}syncControlInputs(){o(this.getConfig().type).forEach(t=>{const e=d(this,t),s=this.controlInputs.get(t.attr);if(s)if("range"===t.kind&&function isRangeSlider(t){return"DB-RANGE-SLIDER"===t.tagName}(s)){const n=Number(e);s.setAttribute("value",String(h(t,n)))}else if("select"===t.kind)s.setAttribute("value",String(e));else if("toggle"===t.kind){Boolean(e)?s.setAttribute("checked",""):s.removeAttribute("checked")}else"colors"===t.kind&&this.renderColorInputs(s,t,e)})}renderColorInputs(t,e,s){const n=[...s];t.replaceChildren();const commitStructuralChange=s=>{this.commitControlValue(e,s),this.renderColorInputs(t,e,s)};if(n.forEach((s,i)=>{const o=document.createElement("div");o.className=`${b}__controls-color`;const l=document.createElement("db-color-picker");if(l.className=`${b}__controls-color-picker`,l.setAttribute("size","s"),l.setAttribute("full-width",""),l.setAttribute("show-alpha","false"),l.setAttribute("show-eyedropper","false"),l.setAttribute("value",s),l.addEventListener("db-change",t=>{const s=t.detail,o=s?.value;"string"==typeof o&&o&&(n[i]=o,this.commitControlValue(e,[...n]))}),o.appendChild(l),n.length>1){const t=this.createIconButton("trash","색상 제거",()=>{commitStructuralChange(n.filter((t,e)=>e!==i))});t.className=`${b}__controls-color-remove`,o.appendChild(t)}t.appendChild(o)}),n.length<8){const e=this.createIconButton("plus","색상 추가",()=>{commitStructuralChange([...n,n[n.length-1]??"#ffffff"])});e.className=`${b}__controls-color-add`,t.appendChild(e)}}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};
+import{parseAnimationBackgroundConfig as t,mountAnimationLayers as e,ANIMATION_BACKGROUND_CLASS as s,applyContainerStyles as n,syncLuminaOverlays as i}from"./animation-background/layers.js";import{getControlsForType as o,resetControlsToDefaults as l,getControlSliderBounds as r,controlSliderToAttr as a,writeControlAttribute as c,readControlValue as d,controlAttrToSlider as h}from"./animation-background/controls.js";import{isGraphitePresetId as u,getGraphitePreset as p}from"./animation-background/graphite-presets.js";import{createDbIcon as m}from"./db-icons.js";const b=s,y=["particles","stars","snow","flowers","confetti","mesh-flow","fluid","radiant","ethereal","graphite"],g=["mesh-flow","fluid","radiant","ethereal"];class DbAnimationBackground extends HTMLElement{constructor(){super(...arguments),this.panelOpen=!1,this.controlInputs=new Map,this.syncingControls=!1,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.panelOpen&&(t.preventDefault(),this.panelOpen=!1,this.syncPanelState())}}static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","noise","show-vignette","preset","zoom","show-controls","shader-speed","shader-intensity","warp"]}connectedCallback(){this.style.display="block",this.render(),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.handleDocumentKeyDown),this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(t,e,s){this.isConnected&&e!==s&&("show-controls"!==t?this.syncingControls||("type"===t&&this.getBool("show-controls",!1)&&this.rebuildControlInputs(),this.applyConfig(),this.getBool("show-controls",!1)&&this.syncControlInputs()):this.syncControlsVisibility())}getBool(t,e=!1){return this.hasAttribute(t)?"false"!==this.getAttribute(t):e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getConfig(){return t(this)}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.mountedType=void 0,this.layersEl&&this.layersEl.replaceChildren()}remountLayers(t){this.layersEl&&(this.teardownLayers(),this.layerHandle=e(this.layersEl,t),this.mountedType=t.type)}canLiveUpdate(t){return this.mountedType===t.type&&y.includes(t.type)&&"function"==typeof this.layerHandle?.update}applyConfig(){const t=this.getConfig();this.className=[b,`${b}--${t.type}`,t.clickable&&!t.disabled&&`${b}--clickable`,t.disabled&&`${b}--disabled`,this.getBool("show-controls",!1)&&`${b}--show-controls`].filter(Boolean).join(" "),n(this,t);const e=this.getSizeStyle(this.getAttribute("width")),s=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));e&&(this.style.width=e),s&&(this.style.height=s),this.style.borderRadius=o||"0",this.style.border="none",this.style.opacity="",this.layersEl&&(this.layersEl.style.opacity=String(t.opacity));const l=this.getAttribute("blend-mode");if(l&&(this.style.mixBlendMode=l),t.disabled)return this.teardownLayers(),void this.syncClickable(t);this.canLiveUpdate(t)?(this.layerHandle?.update?.(t),this.layersEl&&g.includes(t.type)&&i(this.layersEl,t.noise,t.showVignette)):this.remountLayers(t),this.syncClickable(t)}syncClickable(t){this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),t.clickable&&!t.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}render(){if(!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${b}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${b}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.ensureControlsShell(),this.applyConfig(),this.syncControlsVisibility()}ensureControlsShell(){if(this.controlsRootEl)return;const t=document.createElement("div");t.className=`${b}__controls-root`,t.hidden=!0;const e=this.createIconButton("settings","컨트롤 열기",()=>{this.panelOpen=!this.panelOpen,this.syncPanelState()});e.setAttribute("variant","secondary"),e.className=`${b}__controls-gear`;const s=document.createElement("div");s.className=`${b}__controls-panel`,s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.hidden=!0,s.addEventListener("click",t=>t.stopPropagation());const n=document.createElement("div");n.className=`${b}__controls-head`;const i=document.createElement("span");i.className=`${b}__controls-title`,i.append(m("settings",14),document.createTextNode(" Controls"));const r=this.createIconButton("refresh","기본값으로 초기화",()=>{const t=this.getConfig(),e=o(t.type);if(this.syncingControls=!0,l(this,e),"graphite"===t.type){const t=p("graphite");this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig(),this.syncControlInputs()});r.className=`${b}__controls-icon-btn`,n.append(i,r),s.append(n),t.append(e,s),this.appendChild(t),this.controlsRootEl=t,this.panelEl=s}syncControlsVisibility(){if(!this.controlsRootEl)return;const t=this.getBool("show-controls",!1);this.controlsRootEl.hidden=!t,t?this.rebuildControlInputs():(this.panelOpen=!1,this.syncPanelState())}syncPanelState(){if(!this.controlsRootEl||!this.panelEl)return;const t=this.controlsRootEl.querySelector(`.${b}__controls-gear`);t&&(t.dataset.open=this.panelOpen?"true":"false",t.setAttribute("aria-expanded",this.panelOpen?"true":"false")),this.panelEl.hidden=!this.panelOpen}createIconButton(t,e,s){const n=document.createElement("db-button");return n.setAttribute("variant","tertiary"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon",t),n.setAttribute("aria-label",e),n.addEventListener("click",t=>{t.stopPropagation(),s()}),n}rebuildControlInputs(){if(!this.panelEl)return;this.panelEl.querySelectorAll(`.${b}__controls-field`).forEach(t=>t.remove()),this.controlInputs.clear();const t=this.getConfig(),e=o(t.type),s=this.panelEl.querySelector(`.${b}__controls-title`);s&&(s.lastChild?.remove(),s.append(document.createTextNode(` ${t.type}`))),e.forEach(t=>{const e=this.createControlField(t);this.panelEl?.appendChild(e)}),this.syncControlInputs()}createControlField(t){const e=document.createElement("div");if(e.className=`${b}__controls-field`,e.dataset.attr=t.attr,"range"===t.kind){const s=r(t),n=document.createElement("db-range-slider");return n.className=`${b}__controls-range`,n.setAttribute("size","s"),n.setAttribute("full-width",""),n.setAttribute("show-label",""),n.setAttribute("label",t.label),n.setAttribute("show-value",""),n.setAttribute("value-position","top"),n.setAttribute("show-thumb-tooltip",""),n.setAttribute("min",String(s.min)),n.setAttribute("max",String(s.max)),n.setAttribute("step",String(s.step)),null!=s.fixed&&n.setAttribute("value-fixed",String(s.fixed)),n.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,a(t,s.value))}),e.appendChild(n),this.controlInputs.set(t.attr,n),e}if("select"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=t.options??[];if(n.length>4){const i=document.createElement("db-select");i.className=`${b}__controls-select`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}else{const i=document.createElement("db-segment-control");i.className=`${b}__controls-seg`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}return e}if("toggle"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-toggle`;const n=document.createElement("span");n.textContent=t.label;const i=document.createElement("db-toggle");return i.setAttribute("size","s"),i.addEventListener("db-change",e=>{const s=e.detail;this.commitControlValue(t,Boolean(s.checked))}),s.append(n,i),e.appendChild(s),this.controlInputs.set(t.attr,i),e}const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=document.createElement("div");return n.className=`${b}__controls-colors`,e.append(s,n),this.controlInputs.set(t.attr,n),e}commitControlValue(t,e){if(this.syncingControls=!0,c(this,t,e),"preset"===t.attr&&"graphite"===this.getConfig().type&&"string"==typeof e&&u(e)){const t=p(e);this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig()}syncControlInputs(){o(this.getConfig().type).forEach(t=>{const e=d(this,t),s=this.controlInputs.get(t.attr);if(s)if("range"===t.kind&&function isRangeSlider(t){return"DB-RANGE-SLIDER"===t.tagName}(s)){const n=Number(e);s.setAttribute("value",String(h(t,n)))}else if("select"===t.kind)s.setAttribute("value",String(e));else if("toggle"===t.kind){Boolean(e)?s.setAttribute("checked",""):s.removeAttribute("checked")}else"colors"===t.kind&&this.renderColorInputs(s,t,e)})}renderColorInputs(t,e,s){const n=[...s];t.replaceChildren();const commitStructuralChange=s=>{this.commitControlValue(e,s),this.renderColorInputs(t,e,s)};if(n.forEach((s,i)=>{const o=document.createElement("div");o.className=`${b}__controls-color`;const l=document.createElement("db-color-picker");if(l.className=`${b}__controls-color-picker`,l.setAttribute("size","s"),l.setAttribute("full-width",""),l.setAttribute("show-alpha","false"),l.setAttribute("show-eyedropper","false"),l.setAttribute("value",s),l.addEventListener("db-change",t=>{const s=t.detail,o=s?.value;"string"==typeof o&&o&&(n[i]=o,this.commitControlValue(e,[...n]))}),o.appendChild(l),n.length>1){const t=this.createIconButton("trash","색상 제거",()=>{commitStructuralChange(n.filter((t,e)=>e!==i))});t.className=`${b}__controls-color-remove`,o.appendChild(t)}t.appendChild(o)}),n.length<8){const e=this.createIconButton("plus","색상 추가",()=>{commitStructuralChange([...n,n[n.length-1]??"#ffffff"])});e.className=`${b}__controls-color-add`,t.appendChild(e)}}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};